原始关闭原因未解决
我想将另一个 div 内的 div 居中。
<div id="outerDiv"> <div id="innerDiv"> </div> </div>
这是我目前使用的 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; }
如您所见,我现在使用的方法取决于#innerDiv. 如果宽度/高度发生变化,我将不得不修改margin-top和margin- left值。是否有任何通用解决方案可用于#innerDiv独立于其大小来居中?
#innerDiv
margin-top
margin- left
我发现使用margin: auto可以水平对齐#innerDiv到中间。但是垂直对齐呢?
margin: auto
tl;博士
垂直对齐中间有效,但您必须table-cell在父元素和inline-block子元素上使用。
table-cell
inline-block
此解决方案不适用于 IE6 和 7。您的解决方案是 更安全的方法。 但是,由于您使用 CSS3 和 HTML5 标记了您的问题,我认为您不介意使用现代解决方案。
经典解决方案(表格布局)
这是我原来的答案。它仍然可以正常工作,并且是获得最广泛支持的解决方案。表格布局会影响您的渲染性能,因此我建议您使用更现代的解决方案之一。
这是一个例子
测试:
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn { display: table-cell; width: 500px; height: 500px; vertical-align: middle; text-align: center; } .inner { display: inline-block; width: 200px; height: 200px; }
现代解决方案(转换)
由于现在对转换的支持相当好,因此有一种更简单的方法可以做到这一点。
.cn { position: relative; width: 500px; height: 500px; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; }
演示
铀我最喜欢的现代解决方案(flexbox)
我开始越来越多地使用 flexbox,它现在也得到了很好的支持,它是迄今为止最简单的方法。
.cn { display: flex; justify-content: center; align-items: center; }
更多示例和可能性: 比较一页上的所有方法