CSS Vertical Centering Summary

Objective

Some summary of the vertical center layout, beginners can be used.

Element classification has been in the "CSS Horizontal Center Summary" in the said, here is not more to repeat.

One, single-line text vertical Center

Center vertically in a single line of text using the following method:

height:300px;

line-height:300px;

Second, the formal vertical center

1. Directly in the outer layer of the table vertical Center, simple and fast, this method applies to all elements . The disadvantage is that there are some non-semantic tags.

<table>
<tbody>
<tr>
<td>
<div>
I want to center vertically!
</div>
</td>
</tr>
</tbody>
</table>

2. Use CSS3 's flexbox for vertical centering, to write Display:flex and align-items:center in parent element , this method applies to all elements , but there is IE incompatible , the PC page is used with caution.

. father{
width:960px;
height:300px;
Background:yellow;
Display:flex;
Display:-webkit-flex;
Align-items:center;
-webkit-align-items:center;
}

Content continues to update in ...

Original article, hand play difficult, if you need to reprint please indicate the source . If there is a wrong place or a better way to use, I hope you can comment in the comments area, let us make progress together!

CSS Vertical Centering Summary