Explain the centering technique of CSS

Horizontally centered elements:

• General method, element width and height unknown

Mode 1: CSS3 Transform

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%:
    transform: translateX(-50%);
}
Copy the code

Method 2: Flex layout

.parent {
    display: flex;
    justify-content: center;
}
Copy the code

Applies to child elements as floating, absolutely positioned, inline elements, all can be horizontally centered.

• The middle element is an inline element in the regular document flow (display: inline)
  
  

Common inline elements are span, A, img, input, label, and so on

.parent {
    text-align: center;
}
Copy the code

• The middle element is the block element in the regular document flow (display: block)
  
  

Common block elements: div, H1 ~h6, table, P, ul, li, etc

Method 1: Set margin

.parent {
    width: 100%;
}
.child {
    width: 600px;
    height: 50px;
    margin: 0 auto;
    background: #999;
}
Copy the code

Method 2: Change the attribute to inline-block

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}
Copy the code

• The middle element is a floating element

.child {
    width: 100px;
    float: left;
    position: relative;
    left: 50%;
    margin-left: -50px;
}
Copy the code

• The middle element is the absolute positioning element

A:

.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
}
Copy the code

Method 2:

.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
Copy the code

Vertically centered elements:

• General method, element width and height unknown

Mode 1: CSS3 Transform

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

Method 2: Flex layout

.parent {
    display: flex;
    align-items: center;
}
Copy the code

Applies to child elements that are floating, absolutely positioned, and inline, all of which can be vertically centered.

• The center element is a single line of text

.text {
    line-height: 200px;
    height: 200px;
}
Copy the code

• We know the width and height of the element

A:

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

Method 2:

.parent {
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100px;
    margin: auto 0;
}
Copy the code

Vertically centered elements:

• Absolutely centered

div {
    width: 100px;
    height: 100px;
    margin: auto;
    position: fixed;
    //absolute is ok
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
Copy the code

Advantages:

1. Not only can it be right in the middle, but it can be right to the left, right to the right
2. The width and height of elements support the percentage % attribute value and the min-/ Max – attribute
3. Can be encapsulated as a common class that can be used as a pop-up layer
4. Good browser support

• The negative margin is centered

.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
Copy the code

Features:

1. Good cross-browser features, compatible with IE6-IE7
2. Poor flexibility, not adaptive, width and height does not support percentage size and min-/ Max – attributes

• The Transform positioning

.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
Copy the code

Features:

1. Content is adaptive and can be encapsulated as a common class that acts as a pop-up layer
2. May interfere with other transform effects

• Flexbox layout

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

• The text contentIn the middle

text {
    height: 100px;
    line-height: 100px;
    text-align: center;
}
Copy the code