垂直置中(二)

 利用偽元素的高度，讓整體版面產生垂直置中的效果
html

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

#a{
margin: 0 auto;
width:300px;
height:150px;
border:1px solid #000;
text-align:center;
}

#b{
width:30px;
height:40px;
background:green;
display:inline-block;
vertical-align:middle;
}

#c{
width:30px;
height:60px;
background:red;
display:inline-block;
vertical-align:middle;
}

#d{
width:30px;
height:40px;
background:blue;
display:inline-block;
vertical-align:middle;
}

#a::before{
content:”;
width:0;
height:100%;
display:inline-block;
position:relative;
vertical-align:middle;
}