Centered css: The Complete Guide (translation)

Here are the main reference CHRIS COYIER to write an article ( click to see ), mainly talked about css level, some methods vertically centered, behind each method has a demo, you can view the results online.

1 level

Horizontal Centers have inline elements and block elements, inline elements have text, images, links, etc.; block element is mainly div, p and other block elements.

1.1 inline element

For inline elements can be achieved using a horizontal center ( online View Demo ):

.blocklist1_1 {    
    text-align: center;
}

This method is effective for inline, inline-block, inline-table and so on.

1.2 elements

For a block element may be provided which margin-left and the automatic margin-right, like this ( online view Demo ):

.blocklist1_2 .div1 {    
    margin: 0px auto;
}

Regardless of whether the width of the block elements are known, can be implemented centered horizontally.

1.3 plurality of elements

If you have multiple block elements horizontally centered needs, there are two ways you can achieve. One is by means of inline-block, the other by means of flex. For the first method may be used in the following manner ( viewed online Demo ), provided block elements display: inline-block, the middle level of its parent element:

..blocklist1_3 .div1 {    
    text-align: center;    
}    
.blocklist1_3 .div1 div {    
    display: inline-block;    
}

If the parent element with a flex blocks need to add the following style ( view online Demo ):

.blocklist1_3 .div2 {    
    display: flex;    
    justify-content: center;    
}

Vertical 2

Vertical center is also divided into inline elements and block elements, but compared centered horizontally, vertically centered situation here requires a bit more discussion, we analyzed one by one below.

2.1 inline element

2.1.1 single line

For a single line of inline elements, we only need to set its padding-top and padding-bottom value equal to ( online View Demo ):

.blocklist2_1_1 .div1 {    
    padding-top: 20px;    
    padding-bottom: 20px;    
}

If we can not set padding, then the height of inline elements (height = 50px) is known, you can set line-height = height, achieve vertical centering elements ( online View Demo ):

.blocklist2_1_1 .div2 {    
    line-height: 50px;    
    height: 50px;    
}

2.1.2 multi-line

For multi-line elements we have four ways to achieve vertical centering:

. a may be equal to that achieved by providing the vertical center value, and padding-top padding-bottom like the above ( Demo-. 1 ):

.blocklist2_1_2 .div1 {   
    padding: 20px 0px;  
}

. b by means of vertical-align property can be realized vertically centered ( Demo-2 ):

.blocklist2_1_2 .div2 {   
    display: table;    
}    
.blocklist2_1_2 .div2>div {    
    display: table-cell;    
    vertical-align: middle;    
}

. c technique can be implemented by means of flex vertically centered, simply add the following pattern ( Demo-. 3 ):

.blocklist2_1_2 .div3 {    
    display: flex;    
    justify-content: center;   
    flex-direction: column;    
    height: 400px;   
}

. d to a full height of the dummy elements are placed within the container, and then set the text vertically aligned ( Demo-. 4 ):

.blocklist2_1_2 .div4 {    
    position:relative;    
}    
.blocklist2_1_2 .div4::before {    
    content: ' ';    
    display: inline-block;    
    height: 100%;    
    width: 1%;    
    vertical-align: middle;    
}    
.blocklist2_1_2 .div4>div {    
    display: inline-block;    
    vertical-align: middle;    
}

2.2 elements

2.2.1 block elements known height

Page layout sometimes we know the height of the element, sometimes we do not know. The known height of the block elements may be arranged to achieve the vertical center ( Demo ):

.blocklist2_2_1 .div {    
    position: relative;    
}   
.blocklist2_2_1 .div div {    
    position: absoulte;
    top: 50%;    
    height: 100px;
    margin-top: -70px; //这里70px是height*1/2 + padding    
    padding: 20px;    
}

2.2.2 Block element height unknown

Sometimes we do not know the height of the block elements, which can be used when transform is implemented ( Demo ):

.blocklist2_2_2 .div {    
    position: relative;    
}    
.blocklist2_2_2 .div div {    
    transform: translateY(-50%);    
    top: 50%;    
    position: absoulte;    
}

2.2.3 The use of flex achieve

In addition to these two options, you can also use flex to achieve ( Demo ):

.blocklist2_2_3 .div {    
    display: flex;    
    flex-direction: column;    
    justify-content: center;    
}

Horizontal Vertical 3

Sometimes we also hope that not only hope is centered horizontally centered vertically, can be combined with the above-mentioned examples are combined to achieve, divided into the following three aspects:

3.1 the element height, width known

When the element height and width are known, it may be absolutely positioned elements, offset 50% of the center, and a negative value of the margin achieved as follows ( Demo ):

.blocklist3_1 .div {    
    position: relative;    
}    
.blocklist3_1 .div div {    
    position: absoulte;
    top: 50%;    
    left: 50%;    
    margin: -120px 0px 0px -220px;    //height一半，width一半，另外加上padding值
    height: 200px;    
    width: 400px;    
    padding: 20px;    
}

3.2 the element height, width unknown

If the height and width of the element it is unknown, we can use the transform property, imparting a negative 50% in two directions, as follows ( Demo ):

.blocklist3_2 .div {   
    position: relative;    
}    
.blocklist3_2 .div div {    
    position: absolute;     
    top: 50%;    
    left: 50%;    
    transform: translate(-50%, -50%);    
}

3.3 use flexbox achieve

When implemented with the need to use two central flex properties ( Demo ):

.blocklist3_3 .div {     
    display: flex;    
    justify-content: center;    
    align-items: center;
}