Как автоматически центрировать абсолютный элемент внутри относительного родителя с CSS только

Question

я видел, что некоторые посты на эту тему, но ни один из них не отвечает на мой вопрос конкретно

http://jsfiddle.net/27van/ показывает, как центрировать текст по горизонтали.

Хочу центру вертикально в родительской DIV, без использования top, который устанавливает фиксированное число пикселей (в то время как мне это нужно, чтобы быть динамическим)

Любые подсказки?

.parent_div { 
    position:relative; 
    text-align:center; 
} 

.child_div { 
    position:absolute; 
    width:100%; 
    top:70px; 
} 


<div class="parent_div"> 
    <img src=...></img> 
    <div class="child_div"> 
    <h1>Some Title</h1> 
    </div> 
</div> 

Answer 1

Потому что вы дали дочерний элемент ширину 100%, так что я предполагаю, что Вы хотите центрировать выровнять его по вертикали ... в этом случае вам необходимо знать высоту вашего .child-div, если он имеет фиксированная высота, то вы можете использовать что-то вроде этого:

.parent_div { position: relative; }

.child-div { 
    position: absolute; 
    height: 100px; /* for example */ 
    top: 50%; 
    margin-top: -50px /* height divided by 2 */ 
} 

и если высота неизвестна, то вы можете использовать один и тот же метод, но вычислить высота & запас с помощью JQuery. И на всякий случай, если вы хотите выровнять его по горизонтали, вы можете использовать тот же метод, но с этими изменениями ... в этом случае вам нужна фиксированная ширина.

.child-div { 
     position: absolute; 
     width: 100px; /* for example */ 
     left: 50%; 
     margin-left: -50px /* width divided by 2 */ 
    } 

Ваш обновленный fiddle