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

Как вертикально центрировать 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 ]

20 голосов
/ 15 мая 2014

Если кому-то нужна только Internet Explorer 10 (и более поздние версии), используйте flexbox: 

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

Поддержка Flexbox: http://caniuse.com/flexbox

18 голосов
/ 07 марта 2018

Самое простое решение ниже: 

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
}
.inner-div{
  margin: auto;
  text-align:center;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>
14 голосов
/ 20 октября 2014

Современный способ центрировать элемент по вертикали - использовать flexbox.

Вам нужен родитель, чтобы определить рост, а ребенка - по центру.

В приведенном ниже примере центр в центре вашего браузера. Важно (в моем примере) установить height: 100% на body и html, а затем min-height: 100% на ваш контейнер. 

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>
14 голосов
/ 21 января 2016

Центрирование только по вертикали

Если вас не интересуют Internet Explorer 6 и 7, вы можете использовать технику, включающую два контейнера.

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

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

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

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

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

  • должно иметь display: inline-block;

Вы можете добавить любой контент в поле контента, не заботясь о его ширине или высоте!

Демо-версия: 

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;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

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

Центрирование по горизонтали и вертикали

Если вы хотите центрировать как по горизонтали, так и по вертикали, вам также необходимо следующее.

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

  • должно иметь text-align: center;

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

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

Демо-версия: 

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;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

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

13 голосов
/ 22 сентября 2017 

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

Похожие: Центрирование изображения

10 голосов
/ 22 июля 2011

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

Для тех, кто не хочет совершать прыжок:

  1. Укажите родительский контейнер как position:relative или position:absolute.
  2. Укажите фиксированную высоту дочернего контейнера.
  3. Установите position:absolute и top:50% на дочернем контейнере, чтобы переместить верхнюю часть к середине родительского контейнера.
  4. Установить margin-top: -yy, где yy - половина высоты дочернего контейнера, чтобы сместить элемент вверх.

Пример этого в коде: 

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
8 голосов
/ 27 сентября 2016

Я только что написал этот CSS и, чтобы узнать больше, просмотрите: Эта статья с вертикальным выравниванием всего с 3 строчками CSS . 

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
4 голосов
/ 04 июля 2014

Ответ от Billbad работает только с фиксированной шириной .inner div. Это решение работает для динамической ширины, добавляя атрибут text-align: center к .outer div. 

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>
4 голосов
/ 08 февраля 2017

Следующая ссылка представляет простой способ сделать это всего за 3 строки в вашем CSS:

Выровняйте все по вертикали всего с 3 строками CSS .

Кредиты : Себастьян Экстрем .

Я знаю, что на вопрос уже есть ответ, однако я увидел полезность в ссылке для его простоты.

3 голосов
/ 18 сентября 2015

Три строки кода, использующие transform, работают практически в современных браузерах и Internet Explorer: 

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

Я добавляю этот ответ, поскольку обнаружил некоторую неполноту в предыдущей версии этого ответа (а переполнение стека не позволит мне просто комментировать).

  1. относительное 'position' портит стиль, если текущий div находится в теле и не имеет контейнерного div. Хотя «исправлено», кажется, работает, но оно, очевидно, фиксирует контент в центре области просмотра position: relative

  2. Также я использовал этот стиль для центрирования некоторых оверлеев div и обнаружил, что в Mozilla все элементы внутри этого трансформированного div потеряли свои нижние границы. Возможно проблема рендеринга. Но добавление только минимального отступа к некоторым из них сделало это правильно. Chrome и Internet Explorer (на удивление) визуализировали блоки без необходимости заполнения mozilla without inner paddings mozilla with paddings

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