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

xiaoxiao2021-02-28  97

<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; }

优点:只需设置父元素

缺点:兼容性

转载请注明原文地址: https://www.6miu.com/read-59141.html

最新回复(0)