Молодогвардейцев 454015 Россия, Челябинская область, город Челябинск 89085842764
MindHalls logo

Быстрая шпаргалка: как выровнять div по центру страницы

Ситуация, у нас есть блочный элемент div, например такой.

<div class="testdiv">
    <p>Привет</p>
</div>

Мы хотим поместить его ровнехонько в центр странички.

Первое решение, которое приходит в голову

<div class="testdiv" align="center">
    <p>Привет</p>
</div>

Аналогичное решение с помощью CSS

.testdiv {
    text-align: center;
}

И блок встанет в центр, но текст внутри блока так же выровняется по центру. Нам это вовсе не нужно.

Поэтому грамотное решение такой ситуации заключается в том, чтобы задать блоку ширину и автоматические отступы от левого и правого края. Тогда он встанет ровно посередине страницы. Выглядит это вот так.

.testdiv {
    width: 100px;
    margin: 0 auto;
} 

Цель достигнута, блок встал в центр страницы, а текст внутри него остался выровненным по левому краю.

Никак не могу заставить себя запомнить это решение, поэтому закрепил раз и навсегда.

  • И ещё побольше практики помогает запомнить. Например, я забываю как центрировать блок по вертикали, потому что редко такая потребность возникает

  • Можно еще вот так:

    .testdiv 
    {
    margin:0 25% 0 25%;
    }