Вертикальное центрирование div внутри другого div

Ответ 1

tl; dr

Работа по вертикальному выравниванию работает, но вы должны использовать table-cell для своего родительского элемента и inline-block для дочернего элемента.

Это решение не будет работать в IE6 и 7.
Ваш более безопасный способ пойти для них.
Но поскольку вы отметили свой вопрос с помощью CSS3 и HTML5, я думал, что вы не против использовать современное решение.

Классическое решение (раскладка таблицы)

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

Вот пример

Протестировано в:

• FF3.5 +
• FF4 +
• Safari 5 +
• Chrome 11 +
• IE9 +

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Современное решение (преобразование)

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

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Демо

♥ мое любимое современное решение (flexbox)

Я начал использовать flexbox все больше и больше его также хорошо поддерживали сейчас Его гораздо проще.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Демо-версия

Дополнительные примеры и возможности: Сравните все методы на одной странице

Ответ 2

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

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(Ссылка)

Ответ 3

Другой способ использования Transform Translate

Внешнее Div должно установить его position на relative или fixed, а Внутреннее Div должно установить его position на absolute, top и left на 50% и применить transform: translate(-50%, -50%).

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}

<div class="cn">
    <div class="inner">
        test
    </div>
</div>

Ответ 4

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

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Простейшие

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

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Согласно shouldiprefix, это единственные префиксы, которые вам нужны

Вы также можете использовать% в качестве значения для свойства height для элемента .parent-of-element, если родительский элемент имеет высоту или некоторый контент, который расширяет свой вертикальный размер.

Ответ 5

Вместо того, чтобы завязать себя узлом с жестким для записи и трудноподдерживаемым CSS (для этого также нужна тщательная проверка в браузере!) Мне гораздо лучше отказаться от CSS и использовать вместо этого удивительно простой HTML 1.0:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

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

Ответ 6

Я лично предпочитаю трюк использования скрытого псевдоэлемента для охвата всей высоты внешнего контейнера и вертикального выравнивания его с другим контентом. У Криса Койера хорошая статья о технике. http://css-tricks.com/centering-in-the-unknown/ Огромным преимуществом этого является масштабируемость. Вам не нужно знать высоту контента или беспокоиться о его нарастании/сокращении. Это решение масштабируется:).

Вот сценарий со всем CSS, который вам понадобится, и рабочий пример. http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

Ответ 7

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }

<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

Ответ 8

Вертикально центрирующиеся элементы div внутри другого div

Просто установите контейнер для display:table а затем внутренние элементы для display:table-cell. Задайте height на контейнере, а затем установите vertical-align:middle по внутренним элементам. Это имеет широкую совместимость в отношении дней IE9.

Просто отметьте, что вертикальное выравнивание будет зависеть от высоты родительского контейнера.

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}

<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

Ответ 9

Если ваш height не установлен (авто); вы можете дать внутреннему div некоторую прокладку (верхнюю и нижнюю), чтобы сделать ее вертикально центральной:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

Ответ 10

Я использую следующее решение с года, он также работает с IE 7 и 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Ответ 11

Это работает для меня. Можно определить ширину и высоту внешнего div.

Здесь код:

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}

<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

Ответ 12

Fiddle Link < http://jsfiddle.net/dGHFV/2515/ >

Попробуйте

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }

Ответ 13

Если вы все еще не понимаете, прочитав чудесные ответы, приведенные выше.

Вот два простых примера того, как вы можете это достичь.

Использование display: table-cell

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}

<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

Ответ 14

введите здесь описание изображения 100% он работает

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

Ответ 15

для innerdiv, которые не указывают его значение высоты, нет чистого решения css, чтобы сделать его вертикально центрированным. В javascript-решении может быть получена offsetdivight, а затем вычисляется стиль .marginTop.

Ответ 16

Вы можете сделать это с помощью простого блока javascript (jQuery).

CSS

#outerDiv{
    height:100%;
}

Javascript

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

Ответ 17

попробуйте выровнять внутренний элемент следующим образом:

top: 0;
bottom: 0;
margin: auto;
display: table;

и, конечно же:

position: absolute;

Ответ 18

Вы можете центрировать div вертикально и горизонтально в CSS с помощью flex;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

И вторая следующая:

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

И получившийся HTML:

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>

Ответ 19

Это вернется к IE6!

<!DOCTYPE html> требуется также для IE6! [также будет принудительно установлен режим IE6 по умолчанию].

(разумеется, раскраска ящика предназначена только для демонстрационных целей)

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}

<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>

Ответ 20

Вертикальное центрирование div внутри другого div

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}

<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

Ответ 21

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

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

Это тоже хорошая альтернатива для плавания, удачи!

Ответ 22

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

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}

Ответ 23

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

Мы можем использовать функцию calc() для управления свойством margin-top дочернего элемента div, когда он позиционируется как абсолютный относительно родительского элемента div.

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

margin-top вычисление выполняется динамически (с помощью CSS, а не с помощью скрипта, и это очень большое преимущество).

Проверьте это LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will always             
           center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

Выход:

Ответ 24

Я знаю, что вопрос был создан год назад... В любом случае спасибо CSS3, вы можете легко вертикально выровнять div в div (пример там http://jsfiddle.net/mcSfe/98/)

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
}