css的垂直居中常用几种方法

父元素样式

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

子元素垂直居中方法一

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

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

子元素垂直居中方法二

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

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

子元素垂直居中方法三

给父元素设置内容

body {
          display: flex;
          align-items: center; /*定义body的元素垂直居中*/
          justify-content: center; /*定义body的里的元素水平居中*/
      }