Вирівнювання блоків css
Вирівнювання за допомогою негативних відступів
Спосіб підходить для найпростішого випадку, коли відомі розміри блоку, що вирівнюється. Ми позиціонуємо його за допомогою CSS властивостей top і left на 50% і задаємо негативний margin, що дорівнює половині розміру блоку.
Недоліками цього методу є необхідність знати розміри блоку і те, що блок не коректно поводиться в оточенні скроллбарів - він обрізається через негативні відступи. приклад.
Автоматичний відступ
Ще один спосіб, коли відомі розміри блоку, що вирівнюється по центру. Блок позиціонується за допомогою CSS властивостями top, left, right, bottom рівними нулю і margin: auto. Тут у батьківського блоку вже робочі скроллбари, за умови, що в нього задана 100% ширина та висота: приклад.
Табличне вирівнювання
Задаємо батьківському блоку табличні стилі і встановлюємо вирівнювання тексту по центру і вертикалі, а блоку, що вирівнюється, робимо малим блоком: приклад.
Плюс цього методу в тому, що нам не потрібно знати розміри блоку, що вирівнюється за допомогою CSS. Мінус – не робочі скроллбари. Якщо вам потрібен скролл – додайте в конструкцію ще один елемент: приклад.
Вирівнювання блоку CSS за допомогою псевдо-елемента
У цьому методі нас уже не цікавлять розміри блоку, але для центрування по вертикалі потрібен батьківський блок. Задаємо псевдо-елементу: для батьківського блоку 100% висоту, вирівнювання по центру і модель рядкового блоку. Блок, який ми вирівнюємо, також робимо малим блоком та вирівнюванням по центру. Щоб блок не звалювався під псевдо-елемент, коли розміри блоку-нащадка більше ніж батька, прописуємобатька CSS-стилі white-space: nowrap і font-size: 0 (щоб прибрати пробіл між батьком і блоком, що виникає при форматуванні коду), а у самого блоку скасовуємо ці стилі: white-space: normal .
Приклади з нульовим та без нульового font-size: 1, 2.
Якщо вам потрібно, щоб батько займав лише висоту та ширину вікна, а не всієї сторінки, то зробіть як у прикладі.
Вирівнювання блоку за допомогою Flexbox
Найпростіший та універсальний метод, єдиний його недолік – підтримка IE 10+. приклад.
Центруємо за допомогою translate
Цікаве рішення за допомогою CSS3 трансформацій. Забезпечує як горизонтальне центрування, так і вертикальне:
Недоліки даного методу: працює в IE 9+, якщо всередині контейнера є текст і ми імітуємо попап, то текст може бути трохи розмитим: приклад.
Екзотичний спосіб
Можна встановити зовнішні відступи для блоку, при цьому останній буде правильно відображатися серед скроллбарів: Приклад.
Цим же способом можна вирівнювати картинку по центру, а якщо вона більша за батьківський блок - масштабувати її за розміром батька: приклад, приклад з великою картинкою.