CSS Settings Vertical Center

(1) through Display:absolute; set

<div style= "position:absolute;width:200px;height:200px;margin:auto;border:1px solid red;top:0px;bottom:0px; left:0px;right:0px; " >
</div>

(2) Set by CSS3 property

<!--Way 2: Set by CSS3: Display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center; -
<div style= "Display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;width:100px; height:100px;border:1px solid red; " >
<p style= "border:1px solid red;" >test</p>
</div>

At this point is the P element perpendicular, left and right center;

(3) Put small elements, Div vertical center, plus margin:0 Auto, left and right center;

<!--mode 3 by setting display:table; --->
<div style= "border:1px solid red;display:table;width:100%;height:100%;" >
<div style= "display:table-cell;vertical-align:middle;border:1px solid Red;margin:auto;" >
<div style= "border:1px solid red;width:100px;height:100px;margin:0 auto;" >111</div>
</div>
</div>

(4) Transform property setting via HTML5

<!--Mode 4 via Tranform:translate ( -50%,-50%);
<div style= "Position:relative;top:50%;left:50%;transform:translate ( -50%,-50%); width:100px;height:100px; border:1px solid red; " ></div>

CSS Settings Vertical Center