вертикально центр DIV, когда высота тела: 100% без абсолютных поз

Question

я это, чтобы заполнить окно:

html, body { 
height: 100%;} 

затем контейнер также установлен на высоту: 100%, как я вертикально центрировать в DIV с изображение без указания и установки высоты в пикселях и без с использованием абсолютного позиционирования? Использование padding-top: 50%; нижняя доза 50%; не работает - кажется, сдвиг div в зависимости от сайта устройства или окна браузера.

Answer 1

Вы можете использовать display:table и display:table-cell:

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    margin: 0; 
 
    display: table 
 
} 
 

 
body>div { 
 
    display: table-cell; 
 
    text-align: center; /* horizontal */ 
 
    vertical-align: middle; /* vertical */ 
 
}

<div> 
 
    <img src="http://paw.princeton.edu/issues/2012/07/11/pages/6994/C-beer.jpg" /> 
 
</div>

JSFiddle

Больше на display property.

Answer 2

сегодня, display:table и table-cell упростите, вы можете иметь теги, чтобы реагировать как <table>. основно:

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 
html { 
    display: table; 
} 
body { 
    display: table-cell; 
    vertical-align: middle; 
} 

все, что будет в теле будет находиться в вертикальном положении выравнивания в середине. для текста небольшой прямоугольник, используйте выравнивание текста по телу или по краю: авто. вы можете перенести отображение на тело и div вместо html и body.