Как вертикальной Отрихтовать ДИВ в центре независимо от размера экрана

Question

HTML

<div id="centered"> 
//Some Content 
</div> 

CSS

#centered 
{ 
margin-left:auto; 
margin-right:auto; 
} 

Приведенный выше код горизонтально совместив независимо от размера экрана. Как вертикально выровнять один и тот же div в центре?

Answer 1

, если вы знаете, ширину и высоту DIV

то (я предположил это 400 X 200), так что просто дать отрицательный до половины значений этих размеров в маржинальной собственности. Вы содержания будет центрирован

#centered{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-left:-200px; 
    margin-top:-100px; 
    } 

В случае, если ваша ширина и высота динамичны, то put this div in table так что вы можете вертикально и горизонтально выровнять это средний

Answer 2

Попробуйте ниже CSS:

Demo

#centered 
{ 
    position: absolute; 
    height: auto; 
    width: auto;  
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%);  
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
} 

Answer 3

Пробуйте этот код ..

#centered 
{ 
    margin-left:auto; 
    margin-right:auto; 
    display: table-cell; // here is the trick 
    vertical-align:middle; // and this 
    height:200px; 
    border:1px solid blue; 
} 

http://jsfiddle.net/c5Y27/