Вертикальное выравнивание в CSS, никаких высот не известно

Question

Вот моя разметка:

<div id="container"> 
    <img id="image" src="image.jpg" /> 
    <div id="contents">Contents</div> 
</div> 

Высота #container равна высоте #image. Все высоты динамические (они изменяются при изменении размера окна). Изображение не может быть установлено с помощью свойства фона.

Как у меня есть изображение над изображением и вертикально центрировано в #container?

Answer 1

Это должно делать то, что вы ищете. Я только что установил высоту контейнера и изображения в css, но если они одинаковы в html или с помощью javascript, результат должен быть таким же. Цвет фона просто для ясности.

#container { 
background-color: #333; 
height: 200px; 
} 
#image{ 
height: 200px; 
float: left; 
} 
#contents{ 
line-height: 200px; 
float: left; 
position: fixed; 
} 

EDIT: Вот скрипка из раствора, используя старый классический запас авто трюка. Единственное, что может вызвать проблемы здесь, состоит в том, что родитель должен быть позицией: fixed; что может вызвать проблемы у вас в другом месте. Главное, что он работает, и никакие высоты не заданы с использованием пикселей.

link

Вот код от скрипки для чистого раствора Css без каких-либо фиксированных высот.

<div id="container"> 
    <img id="image" src="https://www.google.co.uk/logos/2012/juan_gris-2012-hp.jpg" /> 
    <div id="contents">Contents</div> 
</div> 

#container { 
    position: fixed; 
} 
#contents{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 50%; 
    height: 10%; 
    margin: auto; 
} 

Answer 2

Является ли высота #contents известна? В таком случае это следует сделать это (jsfiddle demo):

#container{ 
    position:relative; 

    /* For demo only */ 
    height:500px; 
    border: 5px solid red; 
} 
#image{ 
    position:absolute; 

    /* For demo only */ 
    height:500px; 
} 

#contents{ 
    position: absolute; 
    top:50%; 

    height:100px; 
    margin-top: -50px; /* Half of #contents height */ 

    /* For demo only */ 
    background-color: blue; 
} 

Answer 3

Если вы знаете высоту #contents вы можете настроить

#container{position:relative;} 
#contents{ 
    position:absolute; 
    top:50%; /*50% of parent*/ 
    margin-top:/*negative one-half of container height i.e. if contaner is 4 em -2em* 
} 

Вы говорите, что вы не знаете высоту #contents, хотя.

Другой вариант установки дисплея: в table-cell и использовать vertical-align: middle

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

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

Более верный путь, чтобы объединить первый вариант с некоторыми JQuery или JavaScript, чтобы найти высоту элемента и установите его Верхнее поле:

content= document.getElementById('content') 
content.style.marginTop = '-' + content.offsetHeight + 'px'; 

http://jsfiddle.net/h76sy/

EDIT: К сожалению, была ошибка в моем javascript, попробуйте сейчас