What kinds of "base" are the 15 kinds of CSS that you have used in the center?

Jianyan

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 the CSS center of the solution compiled a bit, currently includes 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

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

* * Core Code: * *

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

* * Demo Program: * *

Demo Code

1.2 Block-level elements are centered horizontally

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

* * Core Code: * *

.center-block{  margin:0auto;}

* * 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 setting the display type of the block-level element inline-block and the property of the parent container text-align .

* * Core Code: * *

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

* * Demo Program: * *

Demo Code

1.3.2 Use display: flex

The elastic layout ( flex ) is used to center horizontally, which justify-content 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: * *

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

* * 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 () of the inline elements line-height equal.

* * Core Code: * *

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

* * Demo Program: * *

Demo Code

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

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

* * Core Code: * *

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

* * Demo Program: * *

Demo Code

2.2.2 Leverages flex layouts ( flex）

Use the Flex layout to center vertically, where the flex-direction: column spindle orientation is defined vertically. 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;}

* * 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: * *

. Ghost-center {    Position: relative;}. Ghost-center:: Before {    content: " ";    Display: Inline-block;    Height: 100%;    Width: 1%;    vertical-align: Middle;}. Ghost-centerP{    Display: Inline-block;    vertical-align: Middle;    Width: 20rem;}

* * Demo 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 at the top 50% and setting margin-top the half of the height of the offset element upward.

* * 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 with unknown heights

When the height and width of the vertically centered element is unknown, we can use the property in CSS3 transform to invert the y-axis by 50% to achieve vertical centering. However, some browsers have compatibility issues.

* * Core Code: * *

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

* * 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: * *

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

* * Demo Program: * *

Demo Code

3.3 Leveraging Flex Layouts

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

* * Core Code: * *

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

* * Demo Program: * *

Demo Code

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

* * 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: * *

. 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

The text and the code part are compiled in the network. Due to lack of time, limited capacity and other reasons, there are many problems such as the lack of written explanation and code testing. It is therefore limited to the learning range and is not applicable to practical applications.

The scheme described in this article is only part of the center scheme, not all of them. There are compatibility issues with content such as Flex,transform,grid that are involved in CSS3 in another code.

5 Reference Reference

Centering in Css:a Complete guide

W3.org centering Things

How to Center anything with CSS

How do I make a div appear horizontally vertically on the screen?

What kinds of "base" are the 15 kinds of CSS that you have used in the center?