Как вертикально выровнять div внутри div?

Question

Горизонтальное выравнивание div-элемента внутри другого элемента div может быть достигнуто с помощью margin: 0 auto;, если у них есть свойство ширины, отличное от auto, но это не относится к вертикальному выравниванию.

Как вы можете вертикально выровнять div внутри другого div?

Answer 1

Существует множество различных подходов к этому, основанных на различных идеях. Учитывая, что элемент имеет фиксированную высоту (в px,% или что у вас есть), лучшее решение, которое я нашел до сих пор, основано на следующем принципе:

Дайте родительскому div position: relative; и ребенку div position: absolute;, для того, чтобы сделать ребенка абсолютированным по отношению к родительскому.

Для ребенка, установите top, bottomleft, и right к 0. Учитывая, что у ребенка также есть фиксированные width и height, что меньше размера родителя, это приведет к тому, что браузер окажется в невозможной ситуации.

Входит margin: auto; на ребенка, в качестве браузера спасителя. Теперь браузер может добавлять достаточный запас со всех сторон, чтобы дочерний элемент сохранял свой размер, но все же заполнял весь родитель, как принудительно, top, bottom, left и right установлен на 0.

TADAAA! Элемент получает вертикальное и горизонтальное выравнивание внутри родителя.

Markup

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS

​.parent { 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 100px; 
    height: 100px; 
} 

рабочий пример

http://jsfiddle.net/sg3Gw/

Answer 2

Я считаю, что проще использовать display:table-cell; vertical-align:middle; вот jsfiddle

<style> 
.a { 
    border:1px solid red; 
    width:400px; 
    height:300px; 
    display:table-cell; 
    vertical-align:middle; 
} 
</style> 
<div class="a"> 
    <div>CENTERED</div> 
</div> 
​