元素水平垂直居中

居中元素定宽高

1. absolute + 负margin

2. absolute + margin auto + left0,right0,bottom0,top0

3. absolute + calc

居中元素不定宽高

1. absolute + transform

2. text-align + vertical-align

3. writing-mode:

4. table

5. css-table

6. flex

7. grid

// absolute + 负margin
parent {
    position: relative;
}
son {
    position: absolute;
    top: 50%; // 相对于父元素的宽高
    left: 50%;
    margin-left: -{自身宽度}px;
    margin-top: -{自身高度}px;
}

// absolute + margin auto
parent {
    position: relative;
}
son {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}



// absolute + calc
parent {
    position: relative;
}
son {
    position: absolute;
    left: calc(50% - {自身宽度一半}px);
    top: calc(50% - {自身宽度一半}px);
}

// position + transform
parent {
    position: relative;
}
son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽高的50%
};

// textAlign+ lineHeight(行内元素给父元素设置text-align可以达到水平居中)
parent {
    text-align: center;
    line-height: {自身高度}px;
}
son {
    display: inline-block;
    line-height: {自身高度}px;

}



// textalign + verticalAlign(lineheight+vertical垂直居中，display+textalign水平居中)
parent {
    text-align: center;
    line-height: {自身高度}px;
}
son {
    display: inline-block;
    vertical-align: middle;
    
}

// flex
parent {
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
}

// grid
parent {
    display: grid;
}
son {
    justify-self: center;
    align-self: center;
}

parent {
    display: flex;
}

son {
    margin: auto;
}

参考资料： juejin.cn/post/684490…