面试题 -- 水平垂直居中

水平居中

  margin: 0 auto;

---

元素的水平垂直居中

1.定位

position: absolute
left: 50%
top: 50%
margin: -x 0 0 -y
x是元素高度一半
y是元素宽度一半

---

2.用translate设置宽、高

position: absolute
left: 50%
top: 50%
transform: translate(-50%,-50%)

---

3.flex

  display: flex;
  justify-content: center;
  align-items: center;

---

4.table-cell

   .box {
        background-color: #FF8cff;
        width: 300px;
        height: 300px;
        display: table;
    }
    .content {
        background-color: #0ff;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .inner {
        background-color: #000;
        display: inline-block;
        width: 20%;
        height: 20%;
    }