Я много раз искал это в googled, и я не могу понять, почему мой div не сосредоточен.Как центрировать мой div
HTML:
<body><div id="mydiv"></div></body>
CSS
*{
margin:0;
padding:0;
}
html,body{height:100%; width:100%;}
#mydiv{
height:50%;
width:50%;
background:grey;
margin:auto;
}
Это только центры по горизонтали и по вертикали центра обыкновению, Что проблема, потому что я не видел его.
Попробуйте что-то вроде:
#mydiv {
height:50%;
width:50%;
background:grey;
position:absolute;
top:25%;
left:25%;
}
Если вам нужна вертикальная центровка, обратитесь к подходу Dead Center, вам понадобятся несколько дополнительных <div> s, но это должно помочь!
Для вертикального выравнивания вы можете попробовать установить свой запас следующим образом:
#myDiv{margin:50% auto;}
Конечно, это будет зависеть от ваших содержащих элементов. Однако, если разметка, как вы предоставили, он должен отображать вертикально в центре ...
Hopely полезно вам: http://jsfiddle.net/Ug3RM/
#mydiv{
position:absolute;
top:50%;
left:50%;
height:50%;
width:50%;
margin-top:-25%;
margin-left:-25%;
background:grey;
}
OP,
Проверить this Fiddle. Центры как по вертикали, так и по горизонтали.
Использует display:table и display:table-cell подход, который позволяет удобно для vertical-align: middle быть в паре с margin: auto.
Надеюсь, это поможет.
Это на самом деле кладет 50% родительского контейнера между верхом ребенка и вершиной родителя; таким образом, оставляя 0% ниже дна ребенка. т.е. (50/50/50 ... 150% роста) - с ростом ребенка на 50%. – Dawson