Горизонтальное и вертикальное выравнивание элементов
Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
.wrapper
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
.wrapper .box < width: 400px; position: absolute; left: 50%; margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/ >1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
.wrapper .box < display: inline-block; /*располагаем блоки в ряд по горизонтали*/ margin-right: -0.25em; /*убираем правый отступ между блоками*/ >2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button
2.2. Для выравнивания блока по вертикали внутри родительского блока:
.wrapper .box
2.3. Вертикальное выравнивание по типу таблицы:
.wrapper < display: table; width: 100%; >.box
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
.wrapper < position: relative; >.box < height: 100px; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: auto; /*чтобы контент не расползался*/ >2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
если для элемента заданы размеры
если для элемента не заданы размеры и он не пустой
Some text here