水平垂直居中

法一：绝对定位，子绝父相，首先将元素的左上角通过过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。（需要考虑兼容性）

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

法二：绝对定位，子绝父相，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

法三：绝对定位，子绝父相，设置top,right,bottom,left值为0，margin设置为auto，适用于盒子有宽高的情况。

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

法四：flex布局。针对父元素.

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

法五：flex布局。

.parent {
   display: flex;
}
.child {
    margin: auto;
}

法六：flex布局。

.parent {
   display: flex;
}
.child {
   align-self:center;   //垂直居中

    margin:auto;
}

法七：grid布局

.parent {
   display: grid;
}
.child {
    justify-self:center;
    align-self:center;
}

法八：（不常用）

.parent {
   display: table;

   vertical-align:center;

    text-align:center;
}

.child {
    display:inline-block;
}

法九：div中只有一行文字的时候

text-align:center;

line-height:父级高度