CSS⽔平垂直居中之fit-content布局实现⼀个元素⽔平垂直居中的⽅法很多：
元素未知宽⾼
width和height的fit-content值只⽀持Chrome和Firefox浏览器
1.box {
2    position: absolute;
3    top: 0;
4    left: 0;
5    bottom: 0;
6    right: 0;
7    margin: auto;
8    width: fit-content;
9    width: -webkit-fit-content;
10    width: -moz-fit-content;
11    height: fit-content;
12    height: -webkit-fit-content;
13    height: -moz-fit-content;
14    overflow: hidden;
15    text-align: center;
16    background-color: #eee;
17 }
元素已知宽⾼
⼤家对这个应该是很了解的，也是实际开发中运⽤最多的，推荐给刚刚⼊门的⼩伙伴吧。
设置它的⽗元素为position:relative即可：
第⼀种⽅式：
1.children{
2    position: absolute;css设置文字垂直居中
3    top: 0;
4    bottom: 0;
5    left: 0;
6    right: 0;
7    margin: auto;
8    width: 300px;
9    height: 200px;
10    background-color: #5f9a3f;
11 }
第⼆种⽅式：
1.children{
2    position: absolute;
3    top: 50%;
4    left: 50%;
5    margin: -100px 0 0 -150px;
6    width: 300px;
7    height: 200px;
8    background-color: #5f9a3f;
9 }
第三种⽅式：
使⽤CSS3新属性transform的translate属性
1.children{
2    position: absolute;
3    top: 50%;
4    left: 50%;
5    transform: translate(-50%,-50%);
6    width: 300px;
7    height: 200px;
8    background-color: #5f9a3f;
9 }
感谢阅读，欢迎⼤家来吐糟。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。