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

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

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

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

30 ответов


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

.outer {
  display: table;
  position: absolute;
  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>

Просмотр Рабочего Примера С Динамическим Контентом

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


еще один я не вижу в списке:

.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 без хаков!)
  • отзывчивый с процентами и min - / max -
  • Центризованный независимо от прокладки (без коробки-загрунтовкы!)
  • height должно быть объявлено (см. Переменной Высоты)
  • рекомендуемое значение overflow: auto для предотвращения утечки содержимого (см. Переполнение)

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


самым простым способом было бы следующее 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>

На самом деле вам нужно два div для вертикального центрирования. Элемент 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>

здесь результат


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

спасибо Крис Койер из CSS трюки для в этой статье.

.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.


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

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

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

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

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>

чтобы центрировать 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>

решение Flexbox

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

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>

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

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

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


Если кто-то заботится только о 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


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

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

пример ниже будет центрировать div к центру в вашем браузере. Важно (в моем примере) установить height: 100% to 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>

.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>

по теме: центр изображения


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

если вы не заботитесь о 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>

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


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

.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>

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

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

  1. укажите родительский контейнер как position:relative или position:absolute.
  2. укажите фиксированную высоту на дочернем контейнере.
  3. Set position:absolute и top:50% на дочернем контейнере, чтобы переместить верхнюю часть вниз к середине родителя.
  4. Set 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>

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

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

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

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

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

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


ответ от 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>

три строки кода с использованием 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' relative портит стиль, если текущий div находится в теле и не имеет контейнера div. Однако "исправлено", кажется, работает, но он, очевидно, фиксирует содержимое в центр окна просмотра position: relative

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


Я сделал это с этим (измените ширину, высоту, маржу-верхнюю и маржу-левую соответственно):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

не отвечает за совместимость браузера, но также упомянуть новую сетку и не так новую функцию Flexbox.

решетки

From:Mozilla-Документация Сетки-Выровнять Div По Вертикали

Поддержка Браузера: Поддержка Браузера Сетки

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Поддержка Браузера: Браузер Flexbox Поддержка

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

специально для родительских divs с относительной (неизвестной) высотой,центрирование в неизвестном решение работает для меня. В статье есть несколько действительно хороших примеров кода.

Он был протестирован в Chrome, Firefox, Opera и Internet Explorer.

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

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

Я думаю, что твердое решение для всех браузеров без использования flexbox - " align-items: center;" представляет собой комбинацию display: table и vertical-align: middle;.

в CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML-код

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

demo демо:https://jsfiddle.net/6m640rpp/


Я нахожу это наиболее полезным.. он дает наиболее точный макет " H " и очень прост в понимании.

преимущество этой разметки заключается в том, что вы определяете размер своего контента в одном месте -> "PageContent".
Цвета фона страницы и ее горизонтальных полей определяются в соответствующих divs.

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

и здесь с CSS разделены:

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}

содержимое можно легко центрировать с помощью flexbox. Следующий код показывает CSS для контейнера, внутри которого содержимое должно быть центрировано:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}

это решение сработало для меня, если у вас есть элемент блока (e. г. ). Я использовал цвета, чтобы сделать решение более ясным.

HTML-код:

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

Демо Кода JSFiddle


Я использую это. Он работает в Internet Explorer 8 и более поздние:

height:268px - for display:table действует как min-height.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML-код:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

просто сделайте это: добавьте класс в свой div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

и читать в этой статье для объяснений. Примечание:Height необходимо.


следующее работает в моем случае и было протестировано в Firefox.

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

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