Как вертикально центрировать div для всех браузеров? - PullRequest
Новая
       105

Как вертикально центрировать div для всех браузеров?

1254 голосов
/ 28 декабря 2008

Я хочу центрировать div по вертикали с помощью CSS. Я не хочу таблиц или JavaScript, а только чистый CSS. Я нашел несколько решений, но во всех них отсутствует поддержка Internet Explorer 6. 

<body>
    <div>Div to be aligned vertically</div>
</body>

Как я могу центрировать div по вертикали во всех основных браузерах, включая Internet Explorer 6?

Ответы [ 42 ]

1285 голосов
/ 31 мая 2011

Ниже представлено лучшее универсальное решение, которое я мог бы построить для центрирования по вертикали и горизонтали с фиксированной шириной, гибкая высота поле содержимого. Он был протестирован и работает для последних версий Firefox, Opera, Chrome и Safari. 

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Просмотр рабочего примера с динамическим содержимым

Я встроил некоторый динамический контент для проверки гибкости и хотел бы знать, если кто-нибудь видит какие-либо проблемы с ним. Он должен хорошо работать и для центрированных оверлеев - лайтбокс, всплывающее окно и т. Д.

263 голосов
/ 13 августа 2013

Еще один, которого я не вижу в списке: 

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Кросс-браузер (включая Internet Explorer 8 - Internet Explorer 10 без хаков!)
  • Отзывчивый с процентами и мин. / Макс.
  • По центру независимо от отступов (без размеров окна!)
  • height должен быть объявлен (см. Переменная высота )
  • Рекомендуемая настройка overflow: auto для предотвращения распространения контента (см. Переполнение)

Источник: Абсолютное горизонтальное и вертикальное центрирование в CSS

201 голосов
/ 17 декабря 2014

Простейшим способом было бы следующее 3 строки CSS: 

position: relative;
top: 50%;
transform: translateY(-50%);

Ниже приведен пример: 

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>
134 голосов
/ 28 декабря 2008

На самом деле вам нужно два деления для вертикального центрирования. Элемент div с содержимым должен иметь ширину и высоту. 

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Вот результат

78 голосов
/ 15 декабря 2016

Теперь решение flexbox - очень простой способ для современных браузеров, поэтому я рекомендую это для вас: 

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>
74 голосов
/ 21 февраля 2014

Это самый простой метод, который я нашел, и я использую его все время ( jsFiddle демо здесь )

Спасибо Крису Койеру из CSS Tricks за эту статью . 

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Поддержка начинается с IE8.

57 голосов
/ 19 мая 2015

После долгих исследований я наконец нашел окончательное решение. Это работает даже для плавающих элементов. Просмотр источника 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
32 голосов
/ 13 августа 2013

Чтобы центрировать div на странице, проверьте ссылку скрипта . 

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

Другой вариант - использовать flex box, проверить ссылку на скрипку . 

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Другой вариант - использовать преобразование CSS 3: 

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
28 голосов
/ 30 марта 2016

решение Flexbox

Примечания
1. Родительскому элементу присваивается имя класса.
2. Добавьте префиксы вендоров Flex, если это требуется вашими поддерживаемыми браузерами . 

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>
20 голосов
/ 28 декабря 2008

К сожалению, но неудивительно, что решение более сложное, чем хотелось бы. Также, к сожалению, вам нужно будет использовать дополнительные элементы div вокруг элемента, который вы хотите вертикально центрировать.

Для совместимых со стандартами браузеров, таких как Mozilla, Opera, Safari и т. Д., Необходимо настроить внешний div для отображения в виде таблицы и внутренний div для отображения в виде table- ячейка - которая затем может быть вертикально отцентрирована. Для Internet Explorer вам необходимо позиционировать внутренний div абсолютно внутри внешнего div, а затем указать top как 50% . Следующие страницы хорошо объясняют эту технику и предоставляют некоторые примеры кода:

Существует также методика вертикального центрирования с использованием JavaScript. Вертикальное выравнивание контента с помощью JavaScript и CSS демонстрирует это.

Страница:
...