CSS – 实现垂直居中的几种方式

共计 672 个字符，预计需要花费 2 分钟才能阅读完成。

1. 元素为未知宽高的元素 flexhttp://www.ruanyifeng.com/blo…
display: flex;
justify-content:center;
align-items:Center;
translate
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
flex 和 margin:auto
.box{
display: flex;
text-align: center;
}
.box span{margin: auto;}
2. 元素为为定宽定高（自身包含尺寸的元素）的元素绝对定位和负边距
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;

绝对定位和 0 原理：当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性，具有流体特性绝对定位元素的 margin:auto 的填充规则和普通流体元素一模一样
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
参考：https://www.cnblogs.com/hutuz…https://www.zhangxinxu.com/wo…