中心小div垂直和水平 [英] Center small div in big div vertically and horizontally
本文介绍了中心小div垂直和水平的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的代码如下:
<div id="bigDiv">
<div id="smallDiv">DD</div>
</div>
我的CSS如下:
#bigDiv {
border: 1px solid red;
height: 300px;
width: 300px;
vertical-align: middle;
}
#smallDiv {
border: 1px solid black;
height: 100px;
width: 100px;
margin: 0 auto;
}
我想将小div垂直和水平放置在大div中。水平工程,但垂直工程不行。
I want to center the small div vertically and horizontally inside the big div. The horizontal works, but the vertical doesn't.
推荐答案
我相信这是最直接的解决方案, CSS的数量。由于100/300 =〜.33,您可以使用33%的保证金,例如:
I believe this is the most straight-forward solution with the least amount of CSS. Since 100 / 300 = ~.33 you can use a 33% margin like so:
#bigDiv {
border: 1px solid red;
height: 300px;
width: 300px;
}
#smallDiv {
border: 1px solid black;
height: 100px;
width: 100px;
margin: 33%;
}
这是 updated jsFiddle 。
这篇关于中心小div垂直和水平的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文