Frontender Libs - обзор библиотек JS / CSS

CSS | Центрирование

ГОРИЗОНТАЛЬНОЕ ЦЕНТРИРОВАНИЕ:

- Центрирование строк текста.

  p { text-align: center; }

- Центрирование блока с фиксированной шириной.

p.blocktext {

   margin: auto;

   width: 6em; }

- Центрирование изображения

img.displayed {

    display: block;

    margin: auto; }

ВЕРТИКАЛЬНОЕ ЦЕНТРИРОВАНИЕ:

- Отформатировать блок как ячейку таблицы

div.outer {

    height: 300px;

    display: table-cell;

    vertical-align: middle; }

<div class="outer">

   <p>Этот параграф отцентрирован вертикально.</p>

</div>

- С использованием абсолютного позиционирования

div.outer p {

  margin: 0;

  position: absolute;        

  top: 50%;                   

  transform: translate(0, -50%) }

- 'flex' для свойства 'display'

div.outer {

  height: 10em;

  display: flex;

  align-items: center }