1. margin

​ 把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。

margin：0 auto；

2. line-height

​ 通过将单行中的行高设置为父级一样，则可以达到垂直居中的效果

#father {
    hight = 50px;
}

#child {
    line-height = 50px;
}

3. text-align

text-align: center;

4. 绝对定位

1) 直接 left 或者top操作

​ width 和 height 已知条件视居中条件而定,意思就是如果我要向水平居中，那么我必须知道其狂赌，而高度就变得不是那么重要了。

把元素的left或top的属性设为50%,然此时元素并不居中，而是比居中的位置偏左或偏右这个元素宽度或高度的一半的距离，所以需要使用一个负 margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

#box {
    width = 300px;
    height = 300px;
    position: absolute;
    
    
    /*拉回误差的三种方法*/
    
    /*方法一*/
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    
    /*方法二*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /*方法三*/
    /*在left处进行*/
    left: calc(50% - 150px);
    top: calc(50% - 150px);
}