垂直置中(三)

 利用 css 動態計算的能力，抓出高度的距離。可以保留 div block 的特性，不用修改成 inline-block
html

<div id=”a”>
<div id=”b”></div>
<div id=”c”></div>
<div id=”d”></div>
</div>
css

#a{
margin: 0 auto;
width:200px;
height:150px;
border:1px solid #000;
}

#b{
width:30px;
height:40px;
background:green;
float:left;
margin-top:calc(50% – 40px);
margin-left:calc(50% – 45px);
}

#c{
width:30px;
height:80px;
background:red;
float:left;
margin-top:calc(50% – 60px);
}

#d{
width:30px;
height:40px;
background:blue;
float:left;
margin-top:calc(50% – 40px);
}