1. Absolute positioning + negative margin
Compatibility is good, but you need to specify the height and width of the child block, and the negative margin
. WP{position:relative;width:200px;Height:200px;Background-color:#ccc;}. Test{Height:100px;position:Absolute;Top:50%; Left:50%;Margin-top:-50px;Margin-left:-50px;Background-color:#edd;width:100px;}
<class= "wp"> <class= " Test "></div></div>
2. Absolute positioning plus Margin:auto
Cons: Ie6\7 not supported, you need to specify the width and height of the child block
. WP{position:relative;width:200px;Height:200px;Background-color:#ccc;}. Test{position:Absolute;Top:0;Bottom:0; Left:0; Right:0;margin:Auto;Height:100px;width:100px;Background-color:#edd;}
<class= "wp"> <class= "Test "></div></div>
3. Absolute positioning +translate
You do not need to specify a height width for the child block, and the child block is not visible when there is no content in the child block and the height is not set.
IE6/7/8 not supported
. WP{width:200px;Height:200px;Background-color:Yellow;position:relative; }. Test{ Left:50%;Top:50%;Transform:Translate ( -50%,-50%);-webkit-transform:Translate ( -50%,-50%);Background-color:Gray;Color: White;position:Absolute; }
<class= "wp"> <class= "Test "> content </div></div>
4. Flexible box
You do not need to specify a height width for the child block, and the child block is not visible when there is no content in the child block and the height is not set.
IE6/7/8/9 not supported
. WP{Display:-webkit-box;Display:-moz-box;Display:-ms-flexbox;Display:-webkit-flex;Display:Flex;-webkit-box-align:Center;-moz-box-align:Center;-ms-flex-align:Center;-webkit-align-items:Center;Align-items:Center;-webkit-box-pack:Center;-moz-box-pack:Center;-ms-flex-pack:Center;-webkit-justify-content:Center;justify-content:Center;Height:200px;width:200px;Background-color:#ccc;}. Test{Background-color:#edd;}
<class= "wp"> <class= "Test "> content </div></div>
5, Table-cell
IE6/7 not supported
.wp { width : 200px ; : 200px ; display : table ; Background-color : #ccc ;} .test { display : Table-cell ; Text-align : center ; Vertical-align : middle ;}
<class= "wp"> <class= "Test "> content </div></div>
CSS Horizontal Vertical Center block finishing