Detailed explanation of CSS centering method

CSS centering is a problem that front-end engineers often face, and it is also one of the basic skills. Today, the editor has compiled and sorted out the CSS centering solutions. Currently, there are 15 solutions including horizontal centering, vertical centering and horizontal and vertical centering. If there is anything missing, it will be added one after another. It can be regarded as a memo.

1 Horizontally centered

1 within 1.1 Horizontal centering of inline elements

Use text-align: center to achieve horizontal centering of inline elements inside block-level elements. This method is effective for horizontal centering of inline elements (inline), inline blocks (inline-block), inline tables (inline-table), and inline-flex elements.

Core code:

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

1.2 Horizontally center the block-level element

By setting the margin-left and margin-right of the fixed-width block-level element Set to auto to center block-level elements horizontally.

Core code:

.center-block {  margin: 0 auto;
}

1.3 Horizontally center multiple block-level elements

1.3.1 Use inline-block

If a line If there are two or more block-level elements, set the display type of the block-level elements to inline-block and the text-align attribute of the parent container to center the multiple block-level elements horizontally.

Core code:

.container {    text-align: center;
}.inline-block {    display: inline-block;
}

1.3.2 Use display: flex

Use elastic layout (flex) to achieve horizontal centering, where justify-content is used to set the flexible box element Alignment in the main axis (horizontal axis) direction. In this example, the child element is set to be displayed horizontally and centered.

Core code:

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

2 Vertical centering

2.1 Single-line inline (inline-) element vertical Centering

Centers the element vertically by setting the height (height) and line-height (line-height) of the inline element to be equal.

Core code:

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

2.2 Vertically center multi-line elements

2.2.1 Use table layout (table)

Use Table layout's vertical-align: middle can achieve vertical centering of child elements.

Core code:

.center-table {    display: table;
}.v-cell {    display: table-cell;    vertical-align: middle;
}

2.2.2 Using flex layout (flex)

Use flex layout to achieve vertical centering, where flex-direction: column defines the main axis direction as vertical. Because flex layout is defined in CSS3, there are compatibility issues in older browsers.

Core code:

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

2.2.3 Utilize "Ghost Element"

Use "Ghost Element" (ghost element) technology to achieve vertical centering, that is, place it in the parent container A 100% height pseudo-element allows the text and pseudo-element to be vertically aligned to achieve 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 Vertically centered block-level elements

2.3.1 Fixed-height block-level elements

us Knowing the height and width of the centered element, the vertical centering problem is simple. Vertical centering can be achieved by absolutely positioning the element 50% from the top and setting margin-top to offset half of the element's height upwards.

Core code:

.parent {  position: relative;
}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; 
}

2.3.2 Block-level elements of unknown height

When the height and width of the vertically centered element are unknown, we can use the transform in CSS3 Vertical centering is achieved by offsetting the attribute by 50% in the opposite direction to the Y-axis. However, some browsers have compatibility issues.

Core code:

.parent {    position: relative;
}.child {    position: absolute;    top: 50%;    transform: translateY(-50%);
}

3 Horizontal and vertical centering

3.1 Fixed width and height elements are horizontally and vertically centered

Translate the element by half of its overall width using margin to center the element horizontally and vertically.

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 width and height elements are horizontally and vertically centered

Use 2D transformation to reverse both horizontal and vertical directions Translates half of the width and height to center the element horizontally and vertically.

Core code:

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

3.3 Using flex layout

Using flex layout, where justify-content is used to set or retrieve the flexible box element on the main axis The alignment in the (horizontal axis) direction; and the align-items property defines the alignment of the flex items in the cross-axis (vertical axis) direction of the current row of the flex container.

Core code:

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

3.4 Using grid layout

Using grid to achieve horizontal and vertical centering has poor compatibility and is not recommended.

Core code:

.parent {  height: 140px;  display: grid;
}.child { 
  margin: auto;
}

Demo program:

Demo code

3.5 Horizontal and vertical centering on the screen

Horizontal and vertical centering on the screen is very commonly used, and is required for regular login and registration pages. To ensure better compatibility, table layout also needs to be used.

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

Demo program:

Demo code

The above is the detailed content of Detailed explanation of CSS centering method. For more information, please follow other related articles on the PHP Chinese website!