垂直居中的三种方法及其优缺点

本文主要是介绍垂直居中的三种方法及其优缺点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<div class="parent"><div class="child"></div>
</div>

父元素，子元素高度不一定

第一种：

.parent{display: table-cell;vertical-align: middle;
}

优点： 兼容性好

缺点：IE6-7 需改HTML结构

第二种：

.parent{display: relative;
}.child{position: absolute;left: 50%;transform: translate(-50%);
}

优点：不影响父元素

缺点：兼容性

第三种：

.parent{display: flex;align-items: center;
}

优点：只需设置父元素

缺点：兼容性

这篇关于垂直居中的三种方法及其优缺点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---