Common vertical center Methods

① This method is only intended for text elements and does not work for block elements. It is best to set overflow: hidden when multiple lines are used; there will be broken words.

<Div class = "content"> This is a line of text </div>

.content{    width:200px;    height:200px;    line-height: 200px;}

(2) I have always liked this method.
Write a floating value above the element that needs to be vertically centered, but the height is 50% of the parent element, and then set again, margin-bottom: negative value of half of the vertical center element height;

But remember to set clear floating clear: both for the vertical center element;

Although empty tags are added, they are relatively acceptable;

<div class="main">    <div class="floater"></div>    <div id="content">        asdfasfasfd    </div>    </div>

.main{    height:500px;    width:500px;    background: green;}.floater{    float:left;    height:50%;    margin-bottom: -100px;}#content{    clear:both;    height:200px;    line-height: 200px;    width:200px;    background: pink;    overflow: hidden;}

At the same time, there are three other methods, which are summarized by others. For details, refer:

Http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html

In addition, vertical-align: middle; it is better to implement it in the relevant table elements, and the support for other elements is not high;

Common vertical center Methods