CSS水平垂直居中常见方法总结2

Posted 2021-12-17 liubingyjui

1、文本水平居中
line-height,text-align:center(文字)
元素水平居中 margin:0 auo

方案1：position 元素已知宽度
父元素设置为：position: relative;
子元素设置为：
position: absolute; left: 50%;top: 50%;margin: -50px 0 0 -50px;
距上50%，据左50%，减去元素自身宽度的距离

方案2：position transform 元素未知宽度
margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);

方案3：flex布局
父元素加：
display: flex; //flex布局
justify-content: center; //使子项目水平居中
align-items: center; //使子项目垂直居中