CSS Vertical Center Implementation code

This article is mainly to share with you CSS Vertical Center implementation Code, I hope this article CSS code can help everyone.

1. If it is a single line of text, the value of line-height is equal to height

The cases are as follows:

. verticle{    height:100px;    line-height:100px;}

2. Elements of known width and height, with absolute positioning

The cases are as follows:

. container {  position:relative;}. vertical {  width:300px;/* child element Width */  height:300px;  /* child element Height */  position:absolute;  top:50%;  /* Parent element height 50%*/  left:50%;   Margin-left: -150px;  Margin-top: -150px; /* Self-height half */}

3. Elements of unknown width and height, with CSS3 rotation

The cases are as follows:

. container {  position:relative;}. vertical {     position:absolute;     top:50%;     left:50%;     Transform:translate ( -50%,-50%);}

Elastic box Model of 4.CSS3

The cases are as follows:

. content{     Display:flex;     Justify-content:center; /* Child elements are centered horizontally */     align-items:center;/* Child elements are centered vertically */}

5. Simulation of table layout, disadvantage is ie6,7 incompatible

The cases are as follows:

. container {      display:table;}. Content {      Display:table-cell;      Vertical-align:middle; }