element is not wide on the top of the page, horizontally vertically centered

If you've ever studied the horizontal vertical center of a picture, here are a few ways you'll know


The methods described below mainly utilize display:inline-block, make elements into inline block elements, use Vertical-align:middle to achieve vertical centering, take advantage of parent element text-align:center, and achieve horizontal centering.


I. Tabular approach
The contents of the opposite of the table are vertically centered, so it is appropriate to use a table. But the content inside it is the inline element, so the code below can be implemented.
<style>
*{margin:0px; padding:0px;}
Table {position:absolute; width:100%; height:100%; text-align:center; Background:rgba (0,0,0,0.5);}
. test {background:red; display:inline-block;}
</style>
<table>
<tr>
<td>
<div class= "Test" >
Horizontal Vertical Center <br>
Two lines of text oh
</div>
</td>
</tr>
</table>




There is a display:table-cell in the CSS, the attribute value can make the element render as a table cell, it can be easily implemented so that the child elements horizontal vertical Center, try it Yourself
<style>
. wrap {Display:table-cell; width:300px; height:300px; text-align:center; vertical-align:middle; Background:rgba ( 0,0,0,0.5);}
. test {background:red; display:inline-block;}
</style>
<div class= "Wrap" >
<div class= "Test" >
Horizontal Vertical Center <br>
Two lines of text oh
</div>
</div>




Second, the use of Vertical-align:middle
This method is currently my favorite, because the compatibility described below is not very good
This is a horizontal vertical centering with a no width b tag.
<style>
. wrap {width:300px; height:300px; text-align:center; Background:rgba (0,0,0,0.5);}
. vamb {display:inline-block; width:0px; height:100%; vertical-align:middle;}
. test {background:red; display:inline-block;}
</style>


<div class= "Wrap" >
<b class= "Vamb" ></b>
<div class= "Test" >
CSS Bar <br>
Try it a little wider.
</div>
</div>


The same as above, can not, hehe, the following with beautiful pictures of the test bar, more attractive eye


Third, the use of transform implementation
The general use of percentage units is relative to the parent element to calculate, but in the CSS there is a relatively special property is relative to the width of its own height to calculate. That is transform:translate ();
This is simple, but this low version of IE is not compatible, and it is regrettable that the Android 2.3 use this bug, temporarily can not be used on the mobile side
<style>
*{margin:0px; padding:0px;}
. test {position:absolute; left:50%; top:50%;-webkit-transform:translate ( -50%,-50%); Transform:translate ( -50%,-50%) ;}
</style>
<div class= "Test" >

</div>


The picture is horizontally vertically centered, arbitrarily wide and relatively simple.


Four, elastic box model
Elastic box model is FLEX,CSS3 new layout, super easy to use, who knows, recommend everyone to learn.
This method I in the mobile phone side are very fond of, relatively cool AH hehe. It is also regrettable that the low version of IE is not supported, but the mobile phone is no problem, using the old version of the method Display:box;


<style>
*{margin:0px; padding:0px;}
. flex {display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:flex;}
. flex-hc {-webkit-box-pack:center;-ms-justify-content:center;-webkit-justify-content:center; Justify-content: Center;}
. flex-vc {-webkit-box-align:center;-ms-align-items:center;-webkit-align-items:center; align-items:center;}
. wrap {position:fixed; width:100%; height:100%; Background:rgba (0,0,0,0.5); left:0px; top:0px;}
</style>


<div class= "Wrap flex FLEX-HC FLEX-VC" >
<div class= "Test" >
</div>
</div>






I like Flex Horizontal Center vertical center separate with different class definitions, this is more flexible, you like to write together is also possible, quite powerful ah. But the lower version of Android is using the box old version of the elastic box model, if you want to multi-column layout, remember to set the child elements as block elements, otherwise will not take effect, here are some digression.

element is not wide on the top of the page, horizontally vertically centered