CSS3：元素水平垂直居中
Posted 粒粒归仓
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3：元素水平垂直居中相关的知识，希望对你有一定的参考价值。
文 | 归仓 图 | 网络
01
第一种：CSS3 transform
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
02
第二种：已知元素宽高的居中
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
03
第三种：上下左右均0定位+margin: auto;（大小已知）
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100px;
height: 100px;
margin: auto;
}
04
第四种：使用flex的居中布局
.center {
display: flex;
align-items: center;
justify-content: center;
}
其中.center是父元素 可以让子元素的位置上下左右居中
能力有限，目前只知道这四种居中方法，若读者还有其他方法，欢迎分享交流。
扫下面关注
以上是关于CSS3：元素水平垂直居中的主要内容，如果未能解决你的问题，请参考以下文章