CSS Centering method

CSS centering method is very much, according to the actual situation of the work to adopt the appropriate method, it is desirable to a multiplier effect.

Some of the common centering methods are organized as follows:

The code is as follows:

<div class= "Con" >
<div class= "Con1" >

<span> Front-end development </span>
</div>
</div>

If the. Con1 is to be centered when it knows the width and height, you can use the following methods:

Simple vertical centering: margin:0 auto; (provided the fixed width is set to. Con1 and the width is less than the parent element. Con);

Center vertically and horizontally:. con{position:relative;}

. con1{width:300px;height:300px; position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-150px;}

The method of centering the picture inside the. Con1:. con1{height:300px; line-heigth:300px;}

. Con1 Img{vertical-align:middle}

The method of centering the text inside the. Con1: Use only. con1{height:300px; line-heigth:300px;} is enough;

Universal Centering Method:

Method One:

. con{position:relative;}

. Con1{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}

Method Two:

. con{position:relative;}

. Con1{position:absolute;top:50%;left:50%;transform:translate ( -50%,-50%);-webkit-transform:translate ( -50%,-50%) ;-moz-transform:translate ( -50%,-50%);-o-transform:translate ( -50%,-50%);}

Horizontal vertical Centering method under Flexbox layout:

. Con{justify-content:center;align-items:center;display:-webkit-flex;}

CSS Centering method