不定宽高元素如何实现垂直居中

其实元素垂直居中这个话题已经是老生常谈了，但是希望你能够继续看下去，因为实现垂直居中的方法并不只以两种，下面的方法有可能你之前也并没有了解过，那么开始步入正题！

---

• 方法一：relative定位+transform方式

.box {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
复制代码

• 方法二: 利用flex特性，给元素父元素上设置以下属性

.wrapper {
    display: -webkit-flex;
    justify-content: center;
    align-items: center;   
}
复制代码

• 方法三：相对于父元素absolue定位

.wrapper {
    position: relative
}
.box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
复制代码

转载于:https://juejin.im/post/5ae076fef265da0b8e7f1408