水平垂直居中

需要定居中元素的宽高度

• 定位+margin：对父元素设置相对定位，子元素设置绝对定位。top:0; bottom:0; left:0; right: 0; margin: auto;

 <style>
        #father{
    width: 600px;
    height: 600px;
    background-color: #00A5FF;
    position: relative;
    }
    #child{
    background-color: #00F7DE;
    position: absolute;
        width: 100px;
        height: 100px;
        top:0;
        bottom:0;
        left:0;
        right: 0;
        margin: auto;
    }
</style>
    
<div id="father">
    <div id="child">
    </div>
</div>

• 定位+负margin：对父元素设置相对定位，子元素设置绝对定位。top:50%;left:50%。把子元素的左上角移动到父元素的中心。再 margin-top: -50px（子元素高度一半）;margin-left: -50px（子元素宽度一半）;

<style>
       #father{
   width: 600px;
   height: 600px;
   background-color: #00A5FF;
   position: relative;
   }
   #child{
   background-color: #00F7DE;
   position: absolute;
   width: 100px;
   height: 100px;
   top:50%;
   left:50%;
   margin-top: -50px;
   margin-left: -50px;
   }
   </style>
   
<div id="father">
   <div id="child">
   </div>
</div>

• CSS计算属性calc：50%是把元素左上角放在居中位置，再减去自身宽度高度一半移动。

<style>
       #father{
           position: relative;
           width: 400px;
           height: 400px;
           background-color: #00A5FF;
   }
   #child{
       position: absolute;
       background-color: #00F7DE;
       width: 100px;
       height: 100px;
       top:calc(50% - 50px);
       left:calc(50% - 50px);
   }
</style>

<div id="father">
   <div id="child">
   </div>
</div>

不需要定居中元素的宽高度

• 对上面第二种方法的改进：margin-top: -50px;margin-left: -50px;改成 transform: translate(-50% ,-50%); 移动自身元素的50%。 前者方法当要居中的元素宽度高度改变，移动多少也要跟着改变。而设置百分比则不用。但是transform存在浏览器兼容问题。
• Flex布局:对父元素设置为弹性盒模型。并在主轴和交叉轴上设置居中。display: flex;justify-content: center; align-items: center;同样有兼容问题。

<style>
        #father{
            width: 400px;
            height: 400px;
            display: flex;
            background-color: #00A5FF;
            justify-content: center;
            align-items: center;
    }
    #child{
        background-color: #00F7DE;
        width: 100px;
        height: 100px;

    }
</style>
    
<div id="father">
    <div id="child">
    </div>
</div>

• Grid网格布局:对要居中的元素外层包裹一层“容器”，采用网格布局方式。display: grid;再对要居中的元素设置align-self: center; justify-self: center;（和Flex布局的align-items:center;justify-content:center类似）

<style>
        #father{
           display: grid;
            width: 400px;
            height: 400px;
            background-color: #00A5FF;
    }
    #child{
        align-self: center;
        justify-self: center;
        background-color: #00F7DE;
        width: 100px;
        height: 100px;
    }
</style>

<div id="father">
    <div id="child">
    </div>
</div>

• Table布局：将普通元素转换成table效果。通过table-cell将子元素模拟成表格中的td。要把要居中的元素设置inline-block，才能设置宽高度，因为td为行内元素，设置不了宽高度。

<style>
    #father{
           display: table-cell;
            text-align: center;//子元素水平居中
            vertical-align: middle;//子元素垂直居中
            width: 400px;
            height: 400px;
            background-color: #00A5FF;
    }
    #child{
        display: inline-block;
        background-color: #00F7DE;
        width: 100px;
        height: 100px;
    }
</style>
    
<div id="father">
    <div id="child">
    </div>
</div>