中心小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 。