垂直居中的方法
小于 1 分钟
垂直居中的方法
【不定宽高】
不定宽高的方法基本都适用于定宽高的情况
1、flex
// 父元素设置
display: flex;
justify-content: center;
align-items: center;
2、grid
// 父元素设置
display: grid;
justify-content: center;
align-content: center;
3、table
table中有vertical-align属性设置垂直对齐方式。
4、position+transform
position: absolute;
left: 50%;
top: 50%;
background: yellow;
z-index: 1;
transform: translate3d(-50%,-50%,0);
注意：使用父容器使用flex，grid，table 是可以实现的，但是在实际应用中，因为改变了父容器的display，在多个子节点反而不好用了
【定宽高】
1、position+margin
// 子元素设置
position: relative;
top: 50%;
margin: auto;
margin-top: -5px;
2、position+transform
// 子元素设置
position: relative;
top: 50%;
margin: auto;
transform: translateY(-50%);
3、position+calc
// 子元素设置
position: relative;
top: calc(50% - 5px);
left: calc(50% - 10px);