NO. 212 Day: 15 kinds of css centered way, the most complete

CSS centering is the problem that front-end engineers often have to face, but also one of the basic skills. Today there is time to arrange the CSS center, currently including horizontal center, vertical center and horizontal vertical Center scheme total 15 kinds. If there are missing, will be added in succession, is to do is a memo it.

1 Horizontal Center 1.1 inline element horizontally centered

The use text-align: center of inline elements that can be implemented inside a block-level element is horizontally centered. This method is valid for inline inline elements (), inline blocks inline-block (), inline tables ( inline-table ), inline-flex and elements that are centered horizontally.

Core code:

1{2    text-align: Center;  3  }

Demo Program:

Demo Code

1.2 Block-level elements are centered horizontally

by margin-right Setting the fixed-width block- margin-left level element to Auto, the block-level element can be centered horizontally.

Core code:

1{2  margin: 0 auto;  3 }

Demo Program:

Demo Code

1.3 Multi-block element horizontal Center 1.3.1 Utilization inline-block

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

Core code:

1{2    text-align: Center;  3 }4{5    display: inline-block;  6 }

Demo Program:

Demo Code

1.3.2 Use display: flex

The Elastic layout ( flex )is used to center horizontally, justify-content which sets the alignment of the elastic box elements in the direction of the spindle (horizontal axis), in this case the child elements are centered horizontally.

Core code:

1{2    display: flex;  3    justify-content: Center;  4 }

Demo Program:

Demo Code

2 Center vertically 2.1 single-line inline ( inline-) element is centered vertically

Centers the elements vertically by setting the height height () and line height line-height () of the inline elements equal.

Core code:

1{2    height: 120px;  3    line-height: 120px;  4 }

Demo Program:

Demo Code

2.2 Multiline elements vertically centered 2.2.1 using table layouts ( table）

A vertical-align: middle table layout can be used to achieve the vertical centering of child elements.

Core code:

1{2    display: table;  3 }4{5    display: table-cell;  6    vertical-align: Middle;  7 }

Demo Program:

Demo Code

2.2.2 Leverages flex layouts ( flex）

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

Core code:

1{2    display: flex;  3    flex-direction: column;  4    justify-content: Center;  5 }

Demo Program:

Demo Code

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:

1 . Ghost-center{2 position:relative;3}4 . Ghost-center::before{5 content: " ";6 Display:Inline-block;7 Height:100%;8 width:1%;9 vertical-align:Middle;Ten} One . Ghost-center P{ A Display:Inline-block; - vertical-align:Middle; - width:20rem; the}

Program:

Demo Code

Block-level elements with 2.3 block-level elements vertically centered 2.3.1 Fixed heights

We know the height and width of the center element, and the vertical centering problem is simple. Vertical centering can be achieved by absolutely locating the element distance margin-top from the top 50% and setting the half of the height of the offset element upward.

Core code:

1{2  position: relative;  3 }4{5  position: absolute;  6  top: 50%;  7  height: 100px;  8  margin-top: -50px9 }

Demo Program:

Demo Code

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 invert the y-axis by 50% to achieve vertical centering. However, some browsers have compatibility issues.

Core code:

1{2    position: relative;  3 }4{5    position: absolute;  6    top: 50%;  7    transform: translatey ( -50%);  8 }

Demo Program:

Demo Code

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:

1 . Parent{2 position:relative;3}4 . Child{5 width:300px;6 Height:100px;7 padding:20px;8 position:Absolute;9 Top:50%;Ten  Left:50%; One margin:-70px 0 0-170px; A}

Demo Program:

Demo Code

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:

1{2    position: relative;  3 }4{5    position: absolute;  6    top: 50%;  7    left: 50%;  8    transform: translate ( -50%, -50%);  9 }

Demo Program:

Demo Code

3.3 Leveraging Flex Layouts

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

Core code:

1{2    display: flex;  3    justify-content: Center;  4    align-items: Center;  5 }

Demo Program:

Demo Code

3.4 Using the Grid layout

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

Core code:

1{2  height: 140px;  3  display: grid;  4 }56  margin: auto;  7 }

Demo Program:

Demo Code

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:

1 . Outer{2 Display:Table;3 position:Absolute;4 Height:100%;5 width:100%;6}7 8 . Middle{9 Display:Table-cell;Ten vertical-align:Middle; One} A  - . Inner{ - Margin-left:Auto; the Margin-right:Auto; - width:400px; -}

Demo Program:

Demo Code

NO. 212 Day: 15 kinds of css centered way, the most complete