1. Вирівнювання за допомогою негативних відступів Спосіб підходить для найбільш простого випадку, коли...
2. табличне вирівнювання
3. Вирівнювання блоку в CSS за допомогою псевдо-елемента
4. Вирівнювання блоку за допомогою Flexbox
5. Центруємо за допомогою translate
6. Екзотичний спосіб

Вирівнювання за допомогою негативних відступів

Спосіб підходить для найбільш простого випадку, коли відомі розміри вирівнюються блоку. Ми позиціонуємо його за допомогою CSS властивостей top і left на 50% і задаємо негативний margin , Який дорівнює половині розміру блоку.

Вирівнювання за допомогою негативних відступів

Недоліками даного методу є необхідність знати розміри блоку і те, що блок не коректно поводиться в оточенні скроллбар - він обрізається через негативних відступів. приклад .

автоматичний відступ

Ще один спосіб, коли відомі розміри вирівнюються по центру блоку. Блок позіціонріуется за допомогою CSS властивостями top , left , right , bottom рівними нулю і margin: auto. Тут у батьківського блоку вже робочі скроллбар, за умови, що у нього задана 100% ширина і висота: приклад .

табличне вирівнювання

Задаємо батьківського блоку табличні стилі і встановлюємо вирівнювання тексту по центру і вертикалі, а вирівняти блоку робимо рядковим блоком: приклад .

Плюс даного методу в тому, що нам не потрібно знати розміри вирівнюються за допомогою CSS блоку. Мінус - неробочі скроллбар. Якщо вам потрібен скролл - додайте в конструкцію ще один елемент: приклад .

Вирівнювання блоку в CSS за допомогою псевдо-елемента

У цьому методі нас вже не цікавлять розміри блоку, але для центрування по вертикалі потрібно батьківський блок. Задаємо псевдо-елементу : before для батьківського блоку 100% висоту, вирівнювання по центру і модель сатиричного блоку. Блок, який ми вирівнюємо, також робимо рядковим блоком і вирівнюванням по центру. Щоб блок не звалюється під псевдо-елемент, коли розміри блоку-нащадка більше ніж батька, прописуємо батькові CSS-стилі white-space : Nowrap і font-size : 0 (щоб прибрати пробіл між батьком і блоком, що виникає при форматуванням коду), а у самого блоку скасовуємо ці стилі: white-space: normal.

Вирівнювання блоку за допомогою псевдо-елемента

приклади з нульовим і без нульового font-size: 1 , 2 .

Якщо вам потрібно, щоб батько займав тільки висоту і ширину вікна, а не всієї сторінки, то зробіть як в прикладі .

Вирівнювання блоку за допомогою Flexbox

Вирівнювання блоку за допомогою Flexbox

Найпростіший і універсальний метод, єдиний його недолік - підтримка IE 10+. приклад .

Центруємо за допомогою translate

Цікаве рішення за допомогою CSS3 трансформацій. Забезпечує як горизонтальне центрування, так і вертикальне:

.centerdiv {top: 50%; left: 50%; position: absolute; transform: translate (-50%, -50%); }

Недоліки цього методу: працює в IE 9 +, якщо всередині контейнера є текст і ми імітуємо попап, то текст може бути трохи розмитий: приклад .

Екзотичний спосіб

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

Цим же способом можна вирівнювати картинку по центру, а якщо вона більше батьківського блоку - масштабувати її за розміром батька: приклад , приклад c великою картинкою .