CSS-макет — горизонтальное и вертикальное выравнивание

Выравнивание элемента по центру

Чтобы выровнять элемент (например, <div>) по центру по горизонтали, можно использоватьmargin: auto;。

Установка ширины элемента предотвратит его выход за края контейнера.

Элемент центрируется путем указания ширины и равномерного распределения пустых отступов с обеих сторон:

Примечание:Если не задать свойствоwidth(или задать его как 100%), центрирование не сработает.

Выравнивание текста по центру

Если вы хотите выровнять по центру только текст внутри элемента, можно использоватьtext-align: center;

Совет:Дополнительные примеры выравнивания текста см. вCSS Textглаве.

Выравнивание изображения по центру

Чтобы выровнять изображение по центру, можно использоватьmargin: auto;и поместить его вблочныйэлемент:

Выравнивание влево/вправо — с помощью позиционирования

Мы можем использоватьposition: absolute;свойство для выравнивания элементов:

Примечание:Абсолютно позиционированные элементы удаляются из нормального потока и могут перекрывать другие элементы.

Совет:При использованииpositionпри выравнивании элементов обычно<body>элемент будет задаватьmarginиpadding. Это поможет избежать видимых различий в разных браузерах.

При использовании свойства position в IE8 и более ранних версиях есть проблема. Если у элемента-контейнера (в нашем случае <div class="container">) задана ширина и пропущено объявление !DOCTYPE, то IE8 и более ранние версии добавят дополнительный margin 17px с правой стороны. Похоже, это пространство, зарезервированное для полосы прокрутки. При использовании свойства position всегда указывайте объявление !DOCTYPE:

Выравнивание по левому/правому краю — использование метода float

Мы также можем использоватьfloatсвойство для выравнивания элементов:

При таком выравнивании элементов рекомендуется заранее задать margin и padding для элемента <body>. Это позволяет избежать видимых различий в разных браузерах.

Примечание: если высота дочернего элемента больше высоты родительского элемента и для дочернего элемента задано float, то дочерний элемент выйдет за пределы. В этом случае можно использовать "clearfix(очистка float)" для решения этой проблемы.

Мы можем добавить overflow: auto; к родительскому элементу, чтобы решить проблему переполнения дочернего элемента:

При использовании свойства float в IE8 и более ранних версиях есть проблема. Если опустить объявление !DOCTYPE, то IE8 и более ранние версии добавят дополнительный внешний отступ 17px справа. Похоже, это место, зарезервированное для полосы прокрутки. При использовании свойства float всегда задавайте объявление !DOCTYPE:

Вертикальное выравнивание по центру — использование padding

В CSS есть много способов добиться вертикального центрирования. Простой способ — использовать в верхней части заголовкаpadding:

Если вы хотите центрировать и по горизонтали, и по вертикали, можно использоватьpaddingиtext-align: center:

Вертикальное центрирование — с помощью line-height

Вертикальное центрирование — с помощью position и transform

Помимо использованияpaddingиline-height,кроме этого свойства, мы также можем использоватьtransformсвойство для установки вертикального центрирования:

Совет:Для получения дополнительной информации о свойстве transform можно обратиться кглаве «2D Flip»。

Другие примеры

CSS: центрирование div с помощью margin

CSS: выравнивание div по правому краю с помощью абсолютного позиционирования