盒模型：实现水平垂直居中的实用技巧

效果

开发中经常会遇到让一个盒子在父盒子里面水平垂直居中

1. 只能水平或者垂直居中

方法一：给父盒子设置text-align:center;会使子盒子水平居中

当子盒子是行内元素或者行内块时，给父盒子设置该属性即可

方法二：给有固定宽度的块级元素设置margin:0 auto;使子盒子在父盒子水平居中

注意要满足子盒子是块级元素，并且有固定宽度，不然占满一行，非当前元素设置即可

方法三：给单行文本设置line-height=盒子高度；使文本在盒子里垂直居中

设置了line-height后，文本占满了整个盒子的高度，常用在li标签里面包含a标签，让a标签的文字垂直居中

 li{
     height:40px;
 }
 a{
 <!-- a标签不设置高度-->
     line-height:40px;
 }

2. 让盒子同时水平垂直居中

这里只做demo演示说明，统一：box和box1是父子关系，box1是子盒子，box是父盒子

方法一：应用盒子模型的margin

 .box {
             <!-- 下面避免盒子塌陷 -->
             overflow: hidden;
             width: 400px;
             height: 300px;
             background-color: lightsalmon;
         }
         .box1 {
             width: 100px;
             height: 100px;
             background-color: skyblue;
             margin: 100px 150px;
         }

缺点：每次都要需要计算子盒子离边界多少距离，很不方便，还可能会有盒子的塌陷问题

方法二：应用平面位移transform属性

水平（竖直相同）原理：

0. 先让子盒子往右移动父盒子的一半margin-left:50%
1. 再让子盒子往左移动自己宽度的一半

     .box {
             width: 400px;
             height: 300px;
             background-color: lightsalmon;
             overflow: hidden;
         }
     .box1 {
         width: 100px;
         height: 100px;
         background-color: skyblue;
         margin-left: 50%;
         margin-top: 150px;
         transform: translate(-50%, -50%);
     }

margin-top不用50%的原因是，百分比默认的是父盒子宽度的百分比

方法三：应用定位的子绝父相

 .box{
             position:relative;
 }
 .box1 {
             position: absolute;
             left: 50%;
             bottom: 50%; 
             /* 盒子向左移动盒子的一半 */
             margin-left: -25px;
             margin-top:-50px;
             width: 100px;
             height: 100px;
             background-color: skyblue;
        }

pc端建议使用上面的做法，下面的优化做法有兼容性的问题 缺点：子盒子宽度变化后需要重新修改代码

优化：

 .box{
             position:relative;
 }
 .box1 {
             position: absolute;
             left: 50%;
             bottom: 50%; 
             transform:translate(-50%,-50%);
             width: 100px;
             height: 100px;
             background-color: skyblue;
        }

方法四：应用flex布局

这种方法常用于移动端，不考虑兼容性，pc端因为有很多浏览器，要考虑兼容性的问题，推荐使用上面三种方法

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