Вертикальне і горизонтальне центрування за допомогою CSS3 transform

Центрувати елементи по горизонталі не складно, але вертикальне вирівнювання завжди було трохи заплутаним. У цій статті я покажу вам, як центрувати по вертикалі і по горизонталі за допомогою CSS3 transform.

{full-post-img}

Я створив для цього клас .centerthis, який ви можете вільно використовувати в будь-якому проекті. Можна також видалити вирівнювання по горизонталі і залишити лише вертикальне.

.centerthis {
    margin: 0 auto;
    display: table;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Я застосував цей клас для контейнера, у якому знаходяться зображення і текст. Також додав клас до самого тексту.

Горизонтальне центрування може бути зроблено наступним чином: margin: 0 auto; display: table;

Вертикальне центрування трохи складніше. На щастя, в CSS3 є transform!

По-перше, ми змістили вниз елемент по вертикалі на 50% від верхньої частини батьківського контейнера:

position: relative;
top: 50%;

Тепер елемент розташований занадто низько. Це тому, що нам потрібно перемістити елемент вгору на 50% від своєї власної висоти. Ми робимо це за допомогою transform:

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Ось і все! За допомогою цього нескладного коду можно швидко та легко відцентрувати елемент по горизонталі та вертикалі. А якими способами користуетесь ви?