CSS is a problem centered front-end engineers often have to face, it is one of the basic skills. Today there is time to plan centered CSS compilation collate it, and now includes centered horizontally, vertically and horizontally centered vertically centered program a total of 15 species. If missed, will occur in the coming up.
Horizontal Centers
1.1 inline element is centered horizontally
Using text-align: center may be implemented in the middle level of the interior of the inline element block-level elements. This method inline element (inline), inline-block (inline-block), inline table (inline-table), inline-flex elements are centered horizontally effective.
.center-text {
text-align: center;
}
1.2 level elements centered horizontally
By the fixed width of the block elements and the margin-left margin-right set to auto, it is possible to block-level elements centered horizontally.
.center-block {
width:600px;
margin: 0 auto;
}
More than 130 block-level element is centered horizontally
1.3.1 using inline-block
If there are two or more row of block elements, the block elements by providing the type of display attribute text-align inline-block and the parent container so that a plurality of stage elements centered horizontally.
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}
1.3.2 The use of display: flex
An elastic arrangement (Flex), horizontally centered achieved, wherein justify-content box for an elastic element disposed in the spindle (horizontal axis) in the alignment direction, the present embodiment is provided horizontally centered subelements.
.flex-center {
display: flex;
justify-content: center;
}
Vertical center
2.1 inline single row (inline-) vertical centering elements
By setting the height of the inline element (height) and line height (line-height) are equal, so that the vertical center element.
#v-box {
height: 120px;
line-height: 120px;
}
Height value and the parent line-height in the vertical center line can be equal
.container {
height: 200px;
border: 1px Solid # 000;
text-align = left: Center;
}
.center{
line-height:200px;
}
Row element vertically centered over 2.2
2.2.1 using layout table (table)
Table layout using vertical-align: middle may be implemented vertically centered child elements.
.center-table {
display: table;
}
.v-cell {
display: table-cell;
vertical-align: middle;
}
2.2.2 The use of flex layout (flex)
Vertical Centering using flex layout, wherein the flex-direction: column is defined as the longitudinal direction of the spindle. Because flex CSS3 layout is defined, there is a compatibility problem in older browsers.
.center-flex {
display: flex;
flex-direction: column;
justify-content: center;
}
2.2.3 use "Wizard element"
Using "Wizard element" (ghost element) technology centered vertically, i.e. with a 100% of the height of the discharge element in the pseudo-parent container, so that the dummy element and text vertically aligned, so as to achieve the purpose of vertically centered.
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 20rem;
}
2.3 level elements vertically centered
2.3.1 a fixed height block-level element
We know that the middle element of height and width, centered vertically problem is very simple. 50% of the distance from the top by the absolute positioning element, and arranged offset margin-top half of the element height direction, a vertical center can be achieved.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
2.3.2 unknown height of block-level elements
When the height and width of the element vertically centered known, we can use the inverse transform property CSS3 shift method to achieve 50% of the Y-axis vertical centering. But there are compatibility issues part of the browser.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
Horizontal vertical center}
Do not know the height of the vertical center of the parent, is equal to the value of the upper and lower padding
.container{
border:1px solid #000;
text-align:center;
}
.center{
display:inline-blcok;
padding:20px 0;
}
Horizontal elements fixed width and height 3.1 vertical center
Margin entire translation element by half the width of the horizontal and vertical centering elements.
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
3.2 Unknown wide horizontal high vertical center element
Using 2D transform in the horizontal and vertical directions are reverse translated to half the width and height, so that the horizontal element vertically centered.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.3 use flex layout
Using flex layout, wherein justify-content is used to set or retrieve an elastic element in the spindle box (horizontal axis) the alignment direction; align-items and attribute defines flex subkey in the front side of the flex shaft line of the container (vertical axis) alignment direction.
.parent {
display: flex;
justify-content: center;
align-items: center;
}
3.4 using the grid layout
Achieved by using horizontal and vertical grid center, poor compatibility, are not recommended.
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}
Centered on the horizontal and vertical screen 3.5
Vertically centered horizontally on the screen is very common and normal login and registration pages need to be used. To ensure better compatibility, but also need to use table layout.
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
}
Description: In this embodiment only the center part of the scheme in which, not all. Another code relates to CSS3 flex, transform, grid compatibility problems and other content.