Suitable for small white CSS several sleep in the middle of the way!!!

Ordinary small White The most annoying thing is CSS why there is no way to center, now small Fox for everyone to tidy up several ways, please the masses of the people consultation fee!!!

Spit Tongue

1 Horizontal Center

1.1 Inline elements are centered horizontally

The text-align:center can be used to achieve horizontal centering of inline elements within block-level elements. This method is valid for inline elements (inline), inline blocks (inline-block), inline tables (inline-table), and inline-flex elements are centered horizontally.

Core code:

. center-text {
Text-align:center;
}

1.2 Block-level elements are centered horizontally

By setting the Margin-left and margin-right of fixed-width block-level elements to auto, the block-level elements can be centered horizontally.

Core code:

. center-block {
margin:0 Auto;
}

1.3 Multi-block element horizontal Center

1.3.1 Using Inline-block

If there are two or more block-level elements in a row, the block-level element is centered horizontally by setting the display type of Inline-block and the Text-align property of the parent container.

Core code:

. container {
Text-align:center;
}
. inline-block {
Display:inline-block;
}
1.3.2 Using Display:flex

Use elastic layout (Flex) to center horizontally, where justify-content is used to set the alignment of the elastic box element in the direction of the spindle (horizontal axis), in this case the child elements are centered horizontally.

Core code:

. flex-center {
Display:flex;
Justify-content:center;
}

2 Center vertically

2.1 Single-line inline (inline-) elements are centered vertically

The element is centered vertically by setting the height of the inline element (height) and the row height (line-height) equal.

Core code:

#v-box {
height:120px;
line-height:120px;
}

2.2 Multi-line elements are centered vertically

2.2.1 Using table layouts (tables)

The Vertical-align:middle of the table layout enables the vertical centering of child elements.

Core code:

. center-table {
display:table;
}
. V-cell {
Display:table-cell;
Vertical-align:middle;
}
2.2.2 Leveraging Flex layout (Flex)

Use the Flex layout to center vertically, where Flex-direction:column defines the spindle orientation as longitudinal. Because the flex layout is defined in CSS3, there are compatibility issues with older browsers.

Core code:

. Center-flex {
Display:flex;
Flex-direction:column;
Justify-content:center;
}
2.2.3 using "Sprite elements"

Use the Ghost element technique to center vertically, which is to place a 100%-height pseudo-element within the parent container, allowing the text to be vertically aligned with the pseudo-elements, thus achieving vertical centering.

Core code:

. 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 Block-level elements are centered vertically

2.3.1 Block-level elements with fixed heights

We know the height and width of the center element, and the vertical centering problem is simple. Vertical centering is possible by absolutely locating elements at the top 50% and setting the Margin-top up by half the height of the element.

Core code:

. Parent {
position:relative;
}
. Child {
Position:absolute;
top:50%;
height:100px;
Margin-top: -50px;
}
2.3.2 Block-level elements with unknown heights

When the height and width of the vertically centered element is unknown, we can use the Transform property in CSS3 to vertically center the y-axis inverse offset by 50%. However, some browsers have compatibility issues.

Core code:

. Parent {
position:relative;
}
. Child {
Position:absolute;
top:50%;
Transform:translatey (-50%);
}

3 Horizontal Vertical Center

3.1 Fixed width high element horizontal vertical Center

Pans the element horizontally vertically by half the overall width of the margin.

Core code:

. 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 height element horizontally vertically centered

With a 2D transform, half of the width is shifted horizontally and vertically in two directions, so that the element is vertically centered.

Core code:

. Parent {
position:relative;
}
. Child {
Position:absolute;
top:50%;
left:50%;
Transform:translate (-50%,-50%);
}

3.3 Leveraging Flex Layouts

With the flex layout, where justify-content is used to set or retrieve the alignment of the elastic box element in the direction of the spindle (horizontal axis), and the Align-items property defines the alignment of the Flex subkey in the side axis (vertical axis) direction of the current line of the Flex container.

Core code:

. Parent {
Display:flex;
Justify-content:center;
Align-items:center;
}

3.4 Using the Grid layout

Using grid to achieve horizontal vertical centering, poor compatibility, not recommended.

Core code:

. Parent {
height:140px;
Display:grid;
}
. Child {
Margin:auto;
}

3.5 Horizontal vertical centering on the screen

Horizontal vertical centering on the screen is common, and regular login and registration pages are required. To ensure good compatibility, you also need to use the table layout.

Core code:

. 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;
}

Suitable for small white CSS several sleep in the middle of the way!!!