Summarize the new features of CSS3 to summarize the realization method sharing of vertical center

The flex layout in CSS3 and the before pseudo elements are used to achieve vertical centering is really too convenient and elegant, here we summarize the new features of CSS3 to summarize the vertical center of the implementation of the method to share:

0. Center of single-line content
Consider only one row is the simplest, regardless of whether the container fixed height, as long as the container set line-height and height, and make two values equal, plus over-flow:hidden can be

. middle-demo-1{   Height:4em;   Line-height:4em;   Overflow:hidden;   }

Advantages:
(1). Supports both block-and inline-pole elements
(2). All browsers supported
Disadvantages:
(1). Only one row can be displayed
(2). The center of etc. is not supported in IE
It is important to note that:
(1). Use relative heights to define your height and line-height
(2). Don't want to ruin your layout, Overflow:hidden must
Why?
Please compare the following two examples:

<p style= "background: #900; Color: #00f; Font:bold 12px/24px Helvertica,arial,sans-serif; height:24px; width:370px; " >lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><br/><br/><p style= "background: # 090; Color: #00f; Font:bold 12px/2em Helvertica,arial,sans-serif; Height:2em; width:370px; Overflow:hidden; " >lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

The last height is the absolute unit px, and there is no hidden overflow, the next height is in relative unit em, and the overflow is hidden. If your browser supports zooming in, zoom in on the font to see what happens.

1. Using Position:absolute (fixed), set the properties of left, top, Margin-left, margin-top;

. box{       position:absolute;/* or fixed*/    top:50%;       left:50%;       margin-top:-100px;       margin-left:-200px;   }

2. Using the position:fixed (absolute) attribute, Margin:auto this must not be forgotten;

. box{       Position:absolute; or fixed    top:0;       rightright:0;       bottombottom:0;       left:0;       Margin:auto;   }

3. Use the Display:table-cell attribute to center the content vertically;

. box{   Display:table-cell;   Vertical-align:middle;   Text-align:center;   width:120px;   height:120px;   background:purple;   }

4. Use CSS3 's new attribute transform:translate (x, y) attribute;

. box{       Position:absolute;       Transform:translate (50%,50%);       -webkit-transform:translate (50%,50%);       -moz-transform:translate (50%,50%);       -ms-transform:translate (50%,50%);   }

5. One of the highest large, using: before element;

. box{   position:fixed;   Display:block;   Background:rgba (0,0,0,.5);   }   . box:before{   content: ";   Display:inline-block;   Vertical-align:middle;   height:100%;   }   . box.content{   width:60px;   height:60px;   line-height:60px;   color:red;

6.Flex layout;

. box{       Display:-webkit-box;       Display:-webkit-flex;       Display:-moz-box;       Display:-moz-flex;       Display:-ms-flexbox;       Display:flex;       Horizontal center       -webkit-box-align:center;       -moz-box-align:center;       -ms-flex-pack:center;       -webkit-justify-content:center;       -moz-justify-content:center;       Justify-content:center;        Vertical center        -webkit-box-pack:center;       -moz-box-pack:center;       -ms-flex-align:center;       -webkit-align-items:center;       -moz-align-items:center;       Align-items:center;   }