Vertical center display-Summary, vertical center Summary

Vertical center display-Summary, vertical center Summary

1st, center Effect
<Div class = "box">
<Div class = "center"> center effect </div>
</Div>

/* 1st, vertical center effect */. box {width: 200px; height: 200px; border: 1px solid # ccc; position: relative ;}. center {width: 100px; height: 100px; background: gray; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0 ;}

Center of 2nd Images

<Div class = "box2">

<Span class = "block"> </span>
</Div>

/* Vertical center of 2nd images */
/* Span is the feature of the secondary element vertical-align, which is located relative to the line-height of the sibling row */
. Box2 {width: 350px; height: 350px; border: 1px solid # F22727; text-align: center ;}. center2 {vertical-align: middle ;}. block {line-height: 350px;}/* as high as the parent */

3rd, the parent element of the center effect uses display: table; child element display: table-cell;
<Div class = "box3">
<Span class = "center3"> </span>
</Div>

/* 3rd, center effect */. box3 {width: 350px; height: 350px; border: 1px solid # F22727; display: table; text-align: center ;}. center3 {display: table-cell; vertical-align: middle ;}

4th, center Effect
<Div class = "box4">

</Div>

/* 4th. The center effect is calculated based on the parent element */. box4 {width: 300px; height: 300px; border: 1px solid # F22727 ;}. center4 {width: 200px; height: 200px; position: relative; left: 16%; top: 19% ;}