[Basic] Which of these 15 CSS centering methods have you used?

Briefly

CSS centering is a problem that front-end engineers often face, and it is also one of the basic skills. Today, I have time to compile and sort out CSS centering schemes. Currently, there are 15 schemes including horizontal centering, vertical centering and horizontal and vertical centering. If there is any missing, it will be added one after another, and it will be regarded as a memorandum.

css center

1 horizontally centered

1.1 Centering inline elements horizontally

Use text-align: centerto achieve horizontal centering of inline elements inside block-level elements. This method is valid for inline elements ( inline), inline blocks ( inline-block), inline tables ( inline-table), and inline-flexelement horizontal centering.

Core code:

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

Demo program:

demo code

1.2 Horizontal centering of block-level elements

margin-leftBlock-level elements can be centered horizontally by setting the sum of fixed-width block-level elements margin-rightto auto.

Core code:

.center-block {
  margin: 0 auto;
}

Demo program:

demo code

1.3 Horizontal centering of multi-block-level elements

1.3.1 useinline-block

If there are two or more block-level elements in a row, set the block-level element's display type to inline-blockand the parent container text-alignproperty to center the multi-block-level elements horizontally.

Core code:

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

Demo program:

demo code

1.3.2 Usedisplay: flex

Use elastic layout ( flex) to achieve horizontal centering, where justify-contentis used to set the alignment of the elastic box element in the main axis (horizontal axis) direction. In this example, the child elements are set to be displayed in the horizontal center.

Core code:

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

Demo program:

demo code

2 Center vertically

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

heightCenter the element vertically by setting the height ( ) and line height ( ) of the inline element line-heightequal.

core code

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

Demo program:

demo code

2.2 Vertical centering of multi-line elements

2.2.1 Using table layout ( table)

vertical-align: middleVertical centering of child elements can be achieved using table layout .

Core code:

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

Demo program:

demo code

2.2.2 Using flex layout ( flex)

Use flex layout to achieve vertical centering, which flex-direction: columndefines 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;
}

Demo program:

demo code

2.2.3 Utilize the "elf element"

Use the "ghost element" technology to achieve vertical centering, that is, place a pseudo-element with a height of 100% in the parent container to align the text and pseudo-element vertically, so as to achieve the purpose of 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;
}

Demo program:

demo code

2.3 Vertically centering block-level elements

2.3.1 Fixed-height block-level elements

We know the height and width of the centered element, and the problem of vertical centering is simple. margin-topVertical centering can be achieved by absolutely positioning the element 50% from the top and offsetting it up by half the element's height.

Core code:

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

Demo program:

demo code

2.3.2 Block-level elements of unknown height

transformWhen the height and width of the vertically centered element are unknown, we can achieve vertical centering by offsetting 50% of the Y-axis in the reverse direction of the CSS3 property. But some browsers have compatibility issues.

Core code:

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

Demo program:

demo code

3 Centering horizontally and vertically

3.1 Fixed width and height elements are centered horizontally and vertically

Translates half the overall width of the element by 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;
}

Demo program:

demo code

3.2 Unknown width and height elements are centered horizontally and vertically

Using a 2D transform, the element is centered horizontally and vertically by translating half the width and height in the opposite direction in both the horizontal and vertical directions.

Core code:

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

Demo program:

demo code

3.3 Using flex layout

Using flex layout, where justify-contentis used to set or retrieve the alignment of the flexbox element in the main axis (horizontal axis) direction; and the property defines the alignment of the align-itemsflex children in the side axis (vertical axis) direction of the current row of the flex container.

Core code:

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

Demo program:

demo code

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 Centering horizontally and vertically on the screen

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

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

4 Description

Parts of the text and code described in this article are compiled from the Internet. Due to lack of time, limited ability and other reasons, there are many problems such as inaccurate text description and insufficient code testing. Therefore, it is limited to the scope of learning and is not suitable for practical applications.

The solution described in the text is only a part of the centering solution, not all. In addition, there are compatibility issues with CSS3 flex, transform, grid and other content in the code.

5 Citation references

Centering in CSS: A Complete Guide

w3.org centering things

How To Center Anything With CSS

How to center a DIV horizontally and vertically on the screen?