html — Как сделать, чтобы блок был всегда по центру экрана?

Задать вопрос

Вопрос задан

Изменён 3 года 6 месяцев назад

Просмотрен 295 раз

как сделать, чтобы блок main-block был всегда по центру экрана, даже если уменьшили масштаб окна в браузере? Но адаптивность сохранилась.

.title {
  margin: 10px auto 25px;
}

.block-row {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  max-width: 700px;
}

. box {
  position: relative;
  width: 320px;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.block {
  position: relative;
  width: 300px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid red;
}
<div>
  <h2>Tittle of this page</h2>
  <div>
    <div>
      <div>
        some text in block
      </div>
      <div>
        text there
      </div>
    </div>
    <div>
      <div>
        some text in block
      </div>
      <div>
        text there
      </div>
    </div>
  </div>
</div>
  • html
  • css

4

Вот так

.main-block{padding:0px; margin:0px auto;}

7

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Размещение содержимого div по центру

Задать вопрос

Вопрос задан

Изменён 5 лет 6 месяцев назад

Просмотрен 4k раза

Хочу разместить содержимое блока по центру, допустим это горизонтальное меню, как сделать чтобы не указывать ширину блоков, а они подстраивались автоматом под ширину содержимого

то есть:

<ul>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li>
            <a href="#">Item 2</a>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Item 4</a>
        </li>
    </ul>

Что бы не указывать ширину ни у ul ни у блоков li

  • html
  • css
ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
ul li{
    list-style: none;    
}
ul a{
    padding: 5px;
    display: block;
    border: 1px solid #ccc;
}
ul a:hover{
    background: #000;
    color: #fff;
}
<ul>
    <li>
        <a href="#">Item 1</a>
    </li>
    <li>
        <a href="#">Item long text 2</a>
    </li>
    <li>
        <a href="#">Item 3</a>
    </li>
    <li>
        <a href="#">Item 4</a>
    </li>
</ul>

6 

div {
  padding: 10px;
  background-color: #666;
  text-align: center; // центруем строчные элементы
}

ul {
  display: inline-block; /* правращаем в строчный (строчноблочный) элемент,
  что бы сработало выравнивание и блок ужался до размеров контента */
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: center;
  text-align: left; // возвращаем стандартно позиционирование текста у левого края
}

li {
  display: inline-block;
  vertical-align: center;
  padding: 4px;
  background-color: #fff;
}
<div>
  <ul>
      <li>
          <a href="#">Item 1</a>
      </li>
      <li>
          <a href="#">Item 22</a>
      </li>
      <li>
          <a href="#">Item 333</a>
      </li>
      <li>
          <a href="#">Item 4444</a>
      </li>
  </ul>
</div>

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Как выровнять div по центру страницы?

Задавать вопрос

спросил

Изменено 2 года, 10 месяцев назад

Просмотрено 34к раз

Мне нужен div, центрированный по вертикали и горизонтали, то есть по центру страницы. Я попробовал position: absolute и сделал верхний правый нижний левый угол div 0! Но проблема в том, что когда я увеличиваю страницу, она перекрывается другим заголовком и другими элементами div! ПОЖАЛУЙСТА, ПОМОГИТЕ МНЕ! Как я могу расположить div в центре страницы, не перекрывая другие div при увеличении страницы?

Как я уже пробовал:

 .center{
      положение: абсолютное;
      сверху: 0;
      внизу: 0;
      слева: 0;
      справа: 0;
      маржа: авто;
 }

4

Попробуйте,

 html{
  высота:100%;
}
тело
{высота:100%;
  цвет фона: #fcfcfc;

}
.центр
{
  положение: абсолютное;
  маржа: авто;
  сверху: 0;
  справа: 0;
  внизу: 0;
  слева: 0;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: #ccc;
  радиус границы: 3px;
} 
 
 
 HTML, тело {
  высота:100%;
}

.центр {
  граница: 2 пикселя сплошного синего цвета;
  маржа: авто;
  положение: родственник;
  выравнивание текста: по центру;
  верх: 50%;
  ширина: 20%;
} 
 <дел>
  
Тестовый текст

Для горизонтального центрирования блочного элемента (например, div) используйте margin: auto

 . center {
    маржа: авто;
    ширина: 60%;
    граница: 3 пикселя сплошная #73AD21;
    отступ: 10 пикселей;
} 
 <дел>
  
Примечание. Использование margin:auto не будет работать в IE8, если не объявлен !DOCTYPE.