常见的水平与垂直居中方法【持续更新】

水平居中

方法一：inline-block + text-align

优点：对IE6-9的兼容性好

缺点：text-align具有继承性，会导致子元素文本也变成居中

      .parent {
        height: 200px;
        width: 100%;
        background-color: gray;
        text-align: center;
      }
      .child {
        display: inline-block;
        height: 100px;
        width: 100px;
        background-color: red;
      }

 

---

 方法二：table/block + margin

优点：只需要对子元素进行设置就可以实现

缺点：如果子元素脱离文档流（浮动或 固定、绝对定位时），margin属性就会无效

      .parent {
        height: 200px;
        width: 100%;
        background-color: gray;
      }
      .child {
        margin: 0 auto;
        height: 100px;
        width: 100px;
        background-color: red;
      }

 

---

 方法三：absolute + transform

优点：父级元素是否脱离文档流，不影响子元素水平居中效果

缺点：transform是css3的新增属性，浏览器兼容性不好

PS： 为什么使用transform而不是margin-left，因为margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。

      .parent {
        height: 200px;
        width: 100%;
        background-color: gray;
        position: relative;
      }
      .child {
        position: absolute;
        left: 50%;
        /* margin-left: -50px; */
        transform: translateX(-50%);
        height: 100px;
        width: 100px;
        background-color: red;
      }

 图示：

 

---

---

 

垂直居中

方法一：table-cell + vertical-align

优点：浏览器兼容性好

缺点：vertical-align有继承性，会导致父级元素的文本也垂直居中

    <style>
      .parent {
        display: table-cell;
        vertical-align: middle;
        height: 400px;
        width: 100%;
        background-color: gray;
      }
      .child {
        height: 100px;
        width: 100px;
        background-color: red;
      }
    </style>

 

---

方法二：absolute + transform

优点：父级元素是否脱离文档流，不影响子元素垂直居中效果

缺点：transform是css3新增属性，对老版本浏览器兼容性不佳

    <style>
      .parent {
        position: relative;
        height: 400px;
        width: 100%;
        background-color: gray;
      }
      .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 100px;
        width: 100px;
        background-color: red;
      }
    </style>

图示：

 

---

---

 

水平垂直居中

方法一：table + margin实现水平，table-cell + vertical-align实现垂直

缺点：父子元素都设置了值，代码可读性差

    <style>
      .parent {
        display: table-cell;
        vertical-align: middle;
        height: 400px;
        width: 1%;/*表格单元比较特殊，100%无法撑起宽度*/
        background-color: gray;
      }
      .child {
        display: table;
        margin: 0 auto;
        height: 100px;
        width: 100px;
        background-color: red;
      }
    </style>

 

---

方法二：absolute + transform实现水平和垂直

缺点：对不支持css的旧版浏览器兼容性欠佳

    <style>
      .parent {
        position: relative;
        height: 400px;
        width: 100%;
        background-color: gray;
      }
      .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100px;
        width: 100px;
        background-color: red;
      }
    </style>

图示：