it-swarm.com.ru

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

Я хочу центрировать div, который добавляется внутри другого div.

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

Это CSS, который я сейчас использую.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

Как видите, подход, который я сейчас использую, зависит от значений ширины и высоты innerDiv. Если ширина/высота изменится, мне придется изменить значения margin-top и margin-left. Есть ли какое-либо общее решение, которое я могу использовать для центрирования innerDiv всегда независимо от его размера?

Я понял, что с помощью margin:auto можно расположить по горизонтали выравнивание innerDiv по центру. Но как насчет вертикального выравнивания по центру?

481
user700284

tl; dr

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

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

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

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

Вот пример


Проверено в: 

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

Демо

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

666
meo

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

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

( Ссылка )

109
user700284

Другой способ - использовать Transform Translate.

Outer Div должен установить для position значение relative или fixed, а Inner 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>

Проверено в:

  • Opera 24.0 (минимум 12,1)
  • Safari 5.1.7 (минимум 4 с префиксом -webkit-)
  • Firefox 31.0 (минимум 3,6 с префиксом -moz-, от 16 без префикса) 
  • Chrome 36 (минимум 11 с префиксом -webkit-, из 36 без префикса)
  • IE 11, 10 (минимум 9 с префиксом -ms-, из 10 без префикса)
  • Больше браузеров, могу ли я использовать?
45
rnrneverdies

Вертикальное выравнивание всего с 3-мя строками 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, если родительский элемент имеет высоту или некоторый контент, который расширяет его вертикальный размер.

39
drjorgepolanco

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

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

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

16
Iron Pillow

Лично я предпочитаю, чтобы трюк с использованием скрытого псевдоэлемента охватывал всю высоту внешнего контейнера и выравнивал его по вертикали с другим содержимым. У Криса Койера есть хорошая статья о технике. 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;
}
5
Harry Robbins

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

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

4
Nishant Singh

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

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

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

Просто установите контейнер на 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>

3
Volomike

введите описание изображения здесь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/

2
Mangesh Jadhav

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

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

Вот код:

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

2
phlegx

Я использую следующее решение более года, оно также работает с 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>
2
Arsh

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

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

Использование отображения: ячейка таблицы

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

Использование flex-box (дисплей: flex)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

Примечание: проверьте совместимость браузера display: table-cell и flex перед использованием вышеупомянутых реализаций.

2
shivamsupr

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

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

и конечно:

position: absolute;
1
VonAxt

Вы можете центрировать 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>
1
Tariq Javed

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

CSS:

#outerDiv{
    height:100%;
}

Javascript :

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

Это будет работать еще до 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>

1
Bekim Bacaj

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

1
james li

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

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

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

0
user3943543

Я хотел бы показать другой кросс-браузерный способ, который может решить этот вопрос с помощью 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 allways            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>

Результат:

 enter image description here

0
jonathana

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

0
antelove

Чтобы выровнять по центру как по вертикали, так и по горизонтали:

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

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