如何使用CSS <div>在另一个内部水平居中<div>?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Run Code Online (Sandbox Code Playgroud) 我想div用CSS垂直居中.我不想要表或JavaScript,只需要纯CSS.我找到了一些解决方案,但所有这些解决方案都缺少Internet Explorer 6支持.
<body>
<div>Div to be aligned vertically</div>
</body>
Run Code Online (Sandbox Code Playgroud)
如何div在所有主流浏览器(包括Internet Explorer 6)中垂直居中?
我想将一个div添加到另一个div中.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
这是我目前使用的CSS.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Run Code Online (Sandbox Code Playgroud)
正如你所看到的,我现在使用的方法取决于宽度和高度的值innerDiv.如果宽度/高度发生变化,我将不得不修改margin-top和值.margin-left是否有任何通用的解决方案,我可以用它来居中,innerDiv无论是什么它的大小?
我发现使用margin:auto可以将innerDiv水平对齐到中间.但是垂直中间的那个呢?