Центрирование блока div по горизонтали и вертикали при помощи css

Часто у новичков возникает вопрос о центрировании блока по горизонтали и вертикали. Это связано с тем, что ни один учебник не дает информации по этой теме.В этом материале рассмотрим на примерах как сделать центрирование блока

Горизонтальное центрирование

Итак, для того, чтобы отцентрировать блок по горизонтали он должен быть блочным или строчным элементом. Для строчных элементов у родителя должен быть прописан параметр:

HTML:


<!DOCTYPE html>
<html>
    <head>
        <title>Центрирование блока | SeZZaM.com.ua</title>
        <meta charset="UTF-8"> 
    </head>
    <body>
        <div class="parent">
            <div class="inline">Тут контент</div>
        </div>
    </body>
</html>

CSS:


.parent {text-align: center;}

Результат:

Ссылка на пример: тут

Для блочных элементов немного по-другому. Для центрирования блочного элемента по горизонтали:


<!DOCTYPE html>
<html>
    <head>
        <title>Центрирование блока | SeZZaM.com.ua</title>
        <meta charset="UTF-8"> 
    </head>
    <body>
        <div class="parent">
            <div class="block">Тут контент</div>
        </div>
    </body>
</html>


.block {
    width: 500px;
    margin: 0 auto;
}

Результат:

Ссылка на пример: тут

Также существует вариант для элементов, у которых позиционирование absolute. У родительского элемента должно быть позиционирование relative.

HTML:


<!DOCTYPE html>
<html>
    <head>
        <title>Центрирование блока | SeZZaM.com.ua</title>
        <meta charset="UTF-8"> 
    </head>
    <body>
        <div class="parent">
            <div class="block">Тут контент</div>
        </div>
    </body>
</html>

CSS:


.parent {
  height: 50px;
  background: #ccc;
  position: relative;
}

.block {
  display: block;
  position: absolute;
  background: #f00;
  height: 50px;
  width: 70px;
  color: #fff;
  right: calc(50% - 70px/2);
}

В значении параметра right второй операнд – это ширина объекта деленная на 2

Результат:

Ссылка на пример: тут

Вертикальное центрирование

Так же, как и в горизонтальном центрировании, блок должен быть обязательно блоком, иначе попросту CSS правила не дадут никакого эффекта.

Итак, первый вариант похож на предыдущий пример, но разница будет в параметре top.

HTML:


<!DOCTYPE html>
<html>
    <head>
        <title>Центрирование блока | SeZZaM.com.ua</title>
        <meta charset="UTF-8"> 
    </head>
    <body>
        <div class="parent">
            <div class="block">Тут контент</div>
        </div>
    </body>
</html>

CSS:


.parent {
  height: 150px;
  background: #ccc;
  position: relative;
}

.block {
  display: block;
  position: absolute;
  background: #f00;
  height: 50px;
  width: 70px;
  color: #fff;
  top: calc(50% - 50px/2);
}

Результат:

Ссылка на пример: тут

И еще один вариант, который основан на табличном отображении. Родительский элемент должен быть display: table-cell, а у дочернего display: inline. Но он не подходит в тех случаях, когда у родительского элемента ширина должна быть 100%.

HTML:


<!DOCTYPE html>
<html>
    <head>
        <title>Центрирование блока | SeZZaM.com.ua</title>
        <meta charset="UTF-8"> 
    </head>
    <body>
        <div class="parent">
            <div class="block">Тут контент</div>
        </div>
    </body>
</html>

CSS:


.parent {
  display: table-cell;
  height: 150px;
  width: 850px;
  background: #ccc;
  vertical-align: middle;
}

.block {
  display: inline;
  background: #f00;
  height: 50px;
  color: #fff;
}

Результат:

Ссылка на пример: тут