preface

This is a popular question for many interviewers. I have had several interviews as an intern, so I want to make a summary here.

Horizontal and vertical centered elements are fixed in width and height

Absolute + negative margin 2. Absolute + margin auto 3. Absolute + calcCopy the code

Horizontal and vertical center elements are not fixed in width and height

1. absolute + transform
2. text-align + lineheight + vertical-align
3. css-table
4. flex
5. grid
Copy the code

Public Html code

<div class="parent">
    <div class="child"></div>
</div>
Copy the code

Common Css styles

.parent{
    border: 1px solid cadetblue;
    width:300px;
    height:300px; 
}
.child{
   height: 100px;
   width: 100px;
   background: cornflowerblue;   
}
Copy the code

1. The absolute + negative margin

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

The percentage of absolute positioning is relative to the width and height of the parent element. Top :50% Left :50% is based on the offset of the upper-left corner of the child element, as shown below:

To center a child, offset it in the opposite direction with an outer margin that is half the width and height of the child.

2.absolute + margin auto

 .child{
    height: 100px;
    width: 100px;
    background: cornflowerblue;     
    position: absolute;
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Copy the code

Margin = auto; margin = auto; margin = auto; margin = auto; margin = auto

3.absolute + calc

 .child{
    height: 100px;
    width: 100px;
    background: cornflowerblue;     
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}
Copy the code

Css3 calculates the percentage of top and left attributes based on the upper-left offset of the element, then subtracts half of its width and height.

4.absolute + transform

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

The Transform Translate attribute can also be set to a percentage, which is the width and height relative to itself, so translate (-50%,-50%) will center the transform horizontally and vertically.

5.text-align + lineheight + vertical-align

The parent element adds the style

 text-align: center;
 line-height: 300px;
Copy the code

Child element adds style

 display: inline-block;
 vertical-align: middle;
Copy the code

Middle: The center point above and below the element is aligned 1/2x above the line baseline.

The red line in the graph is what I consider the line height baseline.

6.css-table

.parent{
        border: 1px solid cadetblue;
        width:300px;
        height:300px; 
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .child{
        height: 100px;
        width: 100px;
        background: cornflowerblue;     
        display: inline-block;
    }
Copy the code

7.flex

This is the one I use most often, and flex layout has a lot more properties than just horizontal and vertical.

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

8.grid

CSS new grid layout, compatibility is not good.

.parent {
    display: grid;
}
.child {
    align-self: center;
    justify-self: center;
}
Copy the code

conclusion

1. PC side compatibility requirements, fixed width and height, recommended absolute + negative margin
2. The WIDTH and height of the PC are not fixed. Css-table is recommended
3. The PC does not meet compatibility requirements. Flex is recommended
4. Flex is recommended for mobile devices