css的垂直居中

父元素样式

.father{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
}

子元素垂直居中方法一

子元素要是块
absolute+top50%+maringTop(-div一半高度)

.son{
             width: 400px;
            height: 400px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
           margin-top:-200px;
}

子元素垂直居中方法二

absolute+top50%+translateY(-50%)一半高度
子元素要是块

.son{
            width: 400px;
            height: 400px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
            transform: translateY(-50%);
}

css的垂直居中

原文：https://www.cnblogs.com/liuXiaoDi/p/12906811.html