Several methods of centering elements in CSS

For the layout on the web side, vertical centering is difficult to center horizontally, while horizontal and vertical centering is the hardest. On the mobile side, because the width and height of the device is variable, some schemes are difficult to implement. The following use several scenarios to the following HTML to achieve the center, if there are shortcomings, can provide valuable comments:

<div class= "center" >

</div>

1. Use Text-align to center horizontally

This scheme can only be centered horizontally, if you want to center vertically, you want to add padding to div or add margin-top and margin-bottom to the content, so that there is a certain distance between the container and the content. It can also be vertically centered through content positioning, which is described in detail in the third method. Note: The Text-align property is a property set centered on an inline element

2. Center with Margin:auto

This approach has the same limitations as text-align.

. Center {}

. Center img{display:block;width:33%;height:auto;margin:0 Auto;}

Note: Use margin:0 Auto for block-level elements to control the centering

3. Centering with position positioning

This scheme works better in terms of browser compatibility. But you need to know the height of the outer container element.

. center{position:relative;min-height:500px;}

. Center img{width:50%;min-width:200px;height:auto;overflow:auto;position:absolute;left:0;right:0;bottom:0;top:0 ; Margin:auto;}

One of the position:absolute;left:0;right:0;bottom:0;top:0 is to automatically populate the available dimensions of the parent container, Margin:auto and then calculate the extra space to center it.

4. Center with Table-cell

Instead of using the table tag, the scheme uses Display:table-cell, but additional elements need to be added as external containers

<div class= "center-aligned" >

<div class= "Center-core" >

</div>

</div>

Css:

. center-aligned{display:table;width:100%;}

. Center-core{display:table-cell;text-align:center;vertical-align:middle;}

. Center-core img{width:33%;height:33%;}

It is not valid for a Table-cell element to set a percentage wide height value, but you can set the parent element to display:table, and then set the parent element to a percentage wide, and the child element Table-cell automatically fills the parent element

Special attention is paid to:

Table-cell does not perceive margin, setting properties such as Table-row on the parent element will also make it not aware of height

Setting the float or position property will cause damage to the default layout, and consider defining properties such as float for the parent container.

5. Center with Flexbox

This approach becomes the dominant center scenario when old and new syntax differences and browsers disappear.

. Center{display:flex;justify-content:center;align-item:center;}

. Center Img{width:33%;height:auto;}

Now the specification has been finalized, modern browsers are mostly supported, for the earlier version of IE lacks support, but can use Display:table-cell as a downgrade scheme.

6. Center with Calc

. center{min-height:600px;positive:relative;}

. Center img{width:500px;height:500px; Position:absolute;left:calc (50%-250px); Top:calc (50%-250px);}

This scheme is suitable for when the content is fixed size, the IE8 is not supported, and the browser prefix is still required in earlier versions

7. Center with translate

. center{position:relative;min-height:500px;}

. Center img {position:absolute;top:50%;left:50%;transform:translate ( -50%,-50%); width:30%;height:auto;}

The deficiencies of the scheme are:

(1) CSS transform need to be prefixed on some browsers

(2) browsers not supported under IE9

(3) The external container needs to be set to height (or other way setting), because it cannot get the absolute position

(4) If the content contains text, now the browser compositing technology will make the text blurred

Several methods of centering elements in CSS