css实现垂直居中

一、子元素设置属性
1.绝对定位结合margin:auto

.inner1{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

2.绝对定位结合margin设置指定距离

.inner2{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

3.绝对定位结合transform

.inner3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

4.css值与单位（第三版）定义了一套新的单位，称为视口相关的长度单位。

• vw是与视口宽度相关的，1vw实际上是视口宽度1%，而不是100%
• 与vw类似，1vh表格视口高度的1%。
• 视口宽度小于高度时，1vmin等于1vw，否则等于1vh。
• 视口宽度大于高度时，1vmax等于1vw，否则等于1vh。

.inner4{
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

二、父元素设置属性
1.父元素flex布局

.outer{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}