CSS => Центрирование

Использование CSS-преобразования

Преобразования CSS основаны на размере элементов, поэтому, если вы не знаете, насколько высокий или широкий ваш элемент, вы можете установить его на 50% сверху и слева от относительного контейнера и перевести его на 50% слева и вверх центрировать его вертикально и горизонтально.

Имейте в виду, что с помощью этой методики элемент может заканчиваться визуализацией на нецелой границе пикселя, что делает его размытым. См. Этот ответ в SO для обходного пути.

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

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

Просмотреть пример в JSFiddle

СОВМЕСТИМОСТЬ КРЕСТОВЫХ БРАУЗЕРОВ

Свойству transform необходимы префиксы, поддерживаемые старыми браузерами. Префиксы необходимы для Chrome <= 35, Safari <= 8, Opera <= 22, Android Browser <= 4.4.4 и IE9. CSS-преобразования не поддерживаются IE8 и более ранними версиями.

Ниже приведено общее объявление преобразования для предыдущего примера:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

Для получения дополнительной информации см. CanIuse .

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Элемент позиционируется в соответствии с первым нестатическим родителем ( position: relative , absolute или fixed ). Узнайте больше в этой скрипке и этой теме документации .

Для центрирования по горизонтали используйте left: 50% и transform: translateX(-50%) . То же самое касается центрирования по вертикали: центр с top: 50% и transform: translateY(-50%) .

Использование нестатических элементов ширины / высоты с помощью этого метода центрирования может привести к появлению срезающего элемента. Это чаще всего происходит с элементами, содержащими текст, и может быть исправлено путем добавления: margin-right: -50%; и margin-bottom: -50%; , Просмотрите эту скрипку для получения дополнительной информации.

Использование Flexbox

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

Просмотреть результат

HTML:

<img src="http://lorempixel.com/400/200" />

CSS:

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Просмотреть результат

См Динамическая горизонтального и вертикального центровку под Flexbox документации для получения более подробной информации о Flexbox и какие стили означают.

Поддержка браузера

Flexbox поддерживается всеми основными браузерами, за исключением версий IE до 10 .

Некоторые недавние версии браузера, такие как Safari 8 и IE10, требуют префиксов поставщиков .

Для быстрого создания префиксов существует инструмент Autoprefixer , сторонний инструмент.

Для старых браузеров (например, IE 8 и 9) доступен Polyfill .

Для более подробного просмотра поддержки браузера Flexbox см. Этот ответ .

Использование позиции: абсолютная

Работа в старых браузерах (IE> = 8)

Автоматические поля, в сочетании со значениями нуля для left и right или top и bottom смещений, будут центрировать абсолютно позиционированные элементы внутри своего родителя.

Просмотреть результат

HTML

<div class="parent">
  <img class="center" src="http://lorempixel.com/400/200/" />
</div>

CSS

.parent {
  position: relative;
  height: 500px;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Элементы, которые не имеют своей собственной неявной ширины и высоты, как изображения, будут нуждаться в этих значениях.

Другие ресурсы: Абсолютное центрирование в CSS

Техника элемента призрак (взлома Михала Чернова)

Этот метод работает, даже когда размеры контейнера неизвестны.

Настройте элемент «призрак» внутри центрированного контейнера, который будет на 100% высотой, затем используйте vertical-align: middle как для элемента, так и для центрированного элемента.

CSS

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost element */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

  /* There is a gap between ghost element and .centered,
  caused by space character rendered. Could be eliminated by
  nudging .centered (nudge distance depends on font family),
  or by zeroing font-size in .parent and resetting it back
  (probably to 1rem) in .centered. */
  margin-right: -0.25em;
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  white-space: normal; /* Resetting inherited nowrap behavior */
}

HTML

<div class="block">
  <div class="centered"></div>
</div>

Использование выравнивания текста

Наиболее распространенным и простым типом центрирования является текст строк в элементе. CSS имеет правило text-align: center для этой цели:

HTML

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

Это не работает для центрирования целых элементов блока . text-align управляет только выравниванием встроенного контента, такого как текст в его родительском блочном элементе.

Подробнее о text-align в разделе « Типография ».

Центрирование по отношению к другому элементу

Мы увидим, как центрировать контент в зависимости от высоты близкого элемента.

Совместимость: IE8 +, все другие современные браузеры.

HTML

<div class="content">
  <div class="position-container">
    <div class="thumb">
      <img src="http://lorempixel.com/400/200/">
    </div>
    <div class="details">
      <p class="banner-title">text 1</p>
      <p class="banner-text">content content content content content content content content content content content content content content</p>
      <button class="btn">button</button>
    </div>
  </div>
</div>

CSS

.content * {
  box-sizing: border-box;
}
.content .position-container {
  display: table;
}
.content .details {
  display: table-cell;
  vertical-align: middle;
  width: 33.333333%;
  padding: 30px;
  font-size: 17px;
  text-align: center;
}
.content .thumb {
  width: 100%;
}
.content .thumb img {
  width: 100%;
}

Ссылка на JSFiddle

Основными пунктами являются .thumb , .details и .position-container container:

В .position-container должен display: table .
.details должны иметь реальную ширину width: .... и display: table-cell , vertical-align: middle .
.thumb должна иметь width: 100% если вы хотите, чтобы она заняла все оставшееся пространство, и на нее будет влиять ширина .details .
Изображение (если у вас есть изображение) внутри .thumb должно иметь width: 100% , но это не обязательно, если у вас есть правильные пропорции.

Вертикальное выравнивание с тремя строками кода

Поддерживается IE11 +

Просмотреть результат

Используйте эти 3 строки для вертикального выравнивания практически всего. Просто убедитесь, что div / image, к которому вы применяете код, имеет родителя с высотой.

CSS

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>

Вертикально выравнивать изображение внутри div

HTML

<div class="wrap">
    <img src="http://lorempixel.com/400/200/" />
</div>

CSS

.wrap {
    height: 50px;/* max image height */
    width: 100px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before {
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}

Горизонтальное и вертикальное центрирование с использованием таблицы

Можно легко центрировать дочерний элемент, используя свойство отображения table .

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}

Используя calc ()

Функция calc () является частью нового синтаксиса в CSS3, в котором вы можете вычислить (математически), какой размер / позиция занимает ваш элемент, используя различные значения, такие как пиксели, проценты и т. Д. Примечание: - всякий раз, когда вы используете эту функцию , всегда занимайтесь пространством между двумя значениями calc(100% - 80px) .

CSS

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* height divided by 2*/
    left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

<div class="center"></div>

Вертикально выровнять элементы динамической высоты

Применение css интуитивно не дает желаемых результатов, потому что

vertical-align:middle не применяется к элементам уровня блока
margin-top:auto и margin-bottom:auto используемые значения будут вычисляться как ноль
margin-top:-50% процентных значений на основе процентов вычисляются относительно ширины содержащего блока

Для самой широкой поддержки браузера используется обходной путь со вспомогательными элементами:

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

jsfiddle из оригинальный вопрос . Этот подход

работает с динамическими элементами высоты
уважает поток контента
поддерживается устаревшими браузерами

Использование высоты линии

Вы также можете использовать line-height чтобы центрировать вертикально одну строку текста внутри контейнера:

CSS

div {
    height: 200px;
    line-height: 200px;
}

Это довольно уродливо, но может быть полезно внутри элемента <input /> . Свойство line-height работает только тогда, когда текст, который будет центрирован, охватывает одну строку. Если текст переносится на несколько строк, результирующий вывод не будет центрирован.

Центрирование вертикально и горизонтально, не беспокоясь о высоте или ширине

Следующая методика позволяет добавить ваш контент в элемент HTML и центрировать его как по горизонтали, так и по вертикали, не беспокоясь о его высоте или ширине .

Внешний контейнер

должен иметь display: table;

Внутренний контейнер

должен иметь display: table-cell;
должен иметь vertical-align: middle;
должен иметь text-align: center;

Поле содержимого

должен иметь display: inline-block;
следует перенастроить горизонтальное выравнивание текста, например. text-align: left; или text-align: right; , если вы хотите, чтобы текст был центрирован

демонстрация

HTML

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

CSS

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

Смотрите также эту скрипку !

Центрирование с фиксированным размером

Если размер вашего контента фиксирован, вы можете использовать абсолютное позиционирование до 50% с margin который уменьшает половину ширины и высоты вашего контента:

HTML

<div class="center">
    Center vertically and horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

Горизонтальное центрирование с фиксированной шириной

Вы можете центрировать элемент горизонтально, даже если вы не знаете высоту содержимого:

HTML

<div class="center">
    Center only horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

Вертикальное центрирование с фиксированной высотой

Вы можете центрировать элемент по вертикали, если знаете высоту элемента:

HTML

<div class="center">
    Center only vertically
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}

Использование margin: 0 auto;

Объекты могут быть центрированы с использованием margin: 0 auto; если они являются блочными элементами и имеют определенную ширину.

HTML

<div class="containerDiv">
    <div id="centeredDiv"></div>
</div>

<div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph.</p>
</div>

<div class="containerDiv">
    <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
}

#centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}

#centeredParagraph {
    width: 200px;
    margin: 0 auto;
}

#centeredImage {
    display: block;
    width: 200px;
    margin: 0 auto;
}

Результат:

Пример JSFiddle: центрирование объектов с полем: 0 auto;

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

CSS
Центрирование

Поиск…

Использование CSS-преобразования

СОВМЕСТИМОСТЬ КРЕСТОВЫХ БРАУЗЕРОВ

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Использование Flexbox

Использование позиции: абсолютная

Техника элемента призрак (взлома Михала Чернова)

Использование выравнивания текста

Центрирование по отношению к другому элементу

Вертикальное выравнивание с тремя строками кода

Вертикально выравнивать изображение внутри div

Горизонтальное и вертикальное центрирование с использованием таблицы

Используя calc ()

Вертикально выровнять элементы динамической высоты

Использование высоты линии

Центрирование вертикально и горизонтально, не беспокоясь о высоте или ширине

Внешний контейнер

Внутренний контейнер

Поле содержимого

демонстрация

Центрирование с фиксированным размером

Горизонтальное центрирование с фиксированной шириной

Вертикальное центрирование с фиксированной высотой

Использование margin: 0 auto;