元素居中的三种方式。

                                 

 方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法

  #box{
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
     #x{
         width: 200px;
         height: 200px;
         background: yellow;
         position: absolute;
         left: 50%;
         top: 50%;
         margin-left: -100px;
         margin-top: -100px;
         //或者
         transform: translate(-50%, -50%);
 
     }

 

方法二：父元素设置成弹性盒，子元素横向居中，纵向居中 

方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。