Основные способы вертикального выравнивания элементов в CSS

Одна из самых популярных проблем, с которыми сталкиваются веб-дизайнеры – это вертикальное центрирование элементов в CSS и правильное их отображение на девайсах с разными размерами экрана. И сложность не в том, что это тяжело сделать, а в том, что существует несколько разных способов для этого и все они имеют право на жизнь. В этой статье мы рассмотрим семь самых популярных и, что самое главное, — рабочих методов вертикального выравнивания элементов с помощью CSS.

 

 

7 основных способов вертикального центрирования в CSS

Для тестирования способов будем использовать блок div, в который вложен текстовый элемент p с текстом-рыбой:

 

<div class="blok first">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo fermentum orci, in iaculis mi volutpat in. Vestibulum sit amet cursus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque bibendum malesuada tellus vitae accumsan. Vivamus sed metus efficitur, vehicula mauris in, elementum massa.</p>
</div>

 

Мы присвоим блоку div несколько общих стилей, а потом все усилия по выравниванию будем прикладывать к текстовому элементу. Первым делом присвоим текстовому блоку фоновый цвет, чтобы визуально обозначить размер блока, а также обнулим margin и padding, что позволит избежать лишних недоразумений при верстке:

 

.blok {
  position: relative;
  background: #fff;
  margin: 25px;
  padding: 25px;
  min-height: 150px;
  font-size: 25px;
  overflow: hidden;
  color: #333;
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.25), 0 5px 3px rgba(0, 0, 0, 0.10);
  transition: all 0.15s ease;
}
.blok p {
  margin: 0;
  padding: 0;
  background-color: #eee;
}

 

 

Теперь перейдем непосредственно к рассмотрению возможных вариантов вертикального центрирования:

 

 

• 1) Абсолютное позиционирование (position: absolute;)

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

 

.first p {
    width: 80%;
    height: 80%;
    vertical-align: middle;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; 
}

 

Этот метод отлично работает для блоковых элементов и картинок, поскольку с помощью определенной высоты, ширины и, благодаря автоматическим отступам, выровняет их точно по центру родительского элемента. Но у текстовых элементов этот метод работает не совсем идеально: текст всегда будет начинаться в верхнем левом углу абзаца, поэтому при разном количестве текстового контента он не будет располагаться точно по центру.

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

 

 

• 2) Трансформация (transform)

Как и при абсолютном позиционировании, для трюка с использованием трансформации также нужно указывать высоту его родительского элемента, чтобы браузер смог вычислить «центральное» расположение. В отличие от абсолютного позиционирования, эта высота может быть динамическим значением (например, в процентах или vh).

 

.second {
  height: 150px;
}
.second p {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

 

С помощью relative позиционирования отступ сверху будет 50% от верхней точки родительского элемента div, а свойство трансформации translateY также отобразит содержимое контента вертикально на уровне 50% от его высоты. Этот метод отлично работает для элементов, у которых нет явных указаний высоты и ширины.

 

 

• 3) Высота линии (line-height)

Этот метод является самым лучшим для тех случаев, когда элемент для выравнивания имеет конкретные значения высоты. А сам элемент небольшой (например, кнопки, иконки и т.п.). Для больших текстовых блоков этот метод не очень подходит.

 

.third {
  width: 250px;
  height: 75px;
  line-height: 75px;
  border-radius: 15px;
  margin: 0 auto;
  padding: 0;
  min-height: auto;
  text-align: center;
}

 

Для этого метода важно использовать в стилях указание такой же высоты, как и для свойства line-height – это гарантирует нахождение точного вертикального центра. Если нужно еще и горизонтальное центрирование, тогда не забудьте указать для элемента text-align: center;.

 

 

• 4) Отступы (padding)

Если родительский элемент имеет указанную высоту, вы всегда можете центрировать его содержимое с помощью одинаковых отступов.

 

.blok.fourth {
    height: 33vh;
}
.fourth p {
    padding: 16.5vh 8.25vh;
}

 

Поскольку наш родительский элемент div имеет высоту 33vh, центральная точка будет 16.5vh (именно поэтому такой отступ сверху и снизу). Отступы слева и справа зависят от ширины блока. Поскольку vh – это адаптивное значение, с его использованием контент будет увеличиваться или уменьшаться при разных размерах родительского элемента.

Однако следующий способ (использование display: table;) избавляет нас от ручных вычислений и делает это автоматически.

 

 

• 5) Табличное свойство (display: table;)

Это очень простой и эффективный метод центрирования контента. Не путайте свойство table с тегом <table>!

 

.fifth {
  display: table;
}
.fifth p {
  display: table-cell;
  vertical-align: middle;
}

 

Этот метод отлично подходит для адаптивной верстки и центрирует с середины абзаца, а не с верхнего левого угла (как в первом методе).

 

 

• 6) Flexbox (display: flex;)

Свойство CSS display: flex; дает нам наиболее динамичный набор инструментов для верстки, и это лучший метод при работе со сложными структурами внутри родительских элементов. Позиционирует элементы наподобие того, как это делает табличное свойство в предыдущем методе.

 

.sixth {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

 

 

• 7) Комбинирование методов

И, наконец, еще один, бонусный метод! Если в вашей верстке используется довольно сложная структура с многими элементами, тогда, возможно, самым лучшим способом будет комбинирование методов. Например, для элементов верхнего уровня использовать flexbox, а для элементов нижнего уровня отступы и line-height.

 

 

Ниже представлено демо всех основных способов вертикального центрирования контента. Попробуйте поиграться с разными значениями свойств, возможно у вас выйдет что-то качественно новое.

 

 

 

 

Какой метод лучше?

Выбирать вам, при каждом индивидуальном случае. Лучший метод по простоте и реализации – это display: table;. А для сложных макетов, которые требуют большей гибкости – метод flexbox.

Если у вас есть вопросы и/или замечания по данной статье, оставляйте их в форме комментирования ниже.

 

почитать по теме: Основные трюки CSS стилей для начинающих вебмастеров