web前端开发中css垂直居中布局的三个解决方案

来源:设计前沿收集 作者:佚名 时间:2017-08-29

css垂直居中布局要求子元素在父元素垂直居中,并且子元素与父元素高度均为可变的。

web前端开发中css垂直居中布局解决方案大全图片

垂直居中布局解决方案通用html

方案一:使用table-cell和vertical-align实现垂直居中布局

通过设置.parent{display:table-cell;verticzl-align:middle},table-cell将父元素显示方式设置为了表格单元格显示,在父元素上设置垂直居中属性为middle,从而使得父元素中的子元素在显示时都表现为垂直居中。

评价:该方案可以兼容到IE8,并且只需要设置父元素就可以实现居中。

方案二:使用absolute和transform实现垂直居中布局

通过设置.parent{position:relative;},将父元素设置为相对定位元素,作为绝对定位元素的参照物。

设置.child{position:absolute;top:50%;translateY(-50%);},将子元素设置为绝对定位元素,并将其定位到距离父元素顶部50%的位置,在子元素沿Y轴方向向上移动自身高度的50%,从而实现居中,由于距离都是使用百分比实现的,所有元素宽度都是可变的。

评价:子元素作为绝对定位元素脱离了文档流,不会影响到后续元素的布局。同时,如果父元素只有唯一的子元素,那么在子元素脱离文档流之后,父元素就会失去高度,所以上面的例子并不是完善的。

方案三:通过flex和align-items实现垂直居中

设置.parent{display:flex;align-items:center;},将父元素设置为flex弹性元素,再设置align-items属性将flex弹性元素中的子元素设置为居中对齐(垂直)。从而实现垂直居中布局。

评价:flex弹性元素属于css3中新引入的,兼容性还不是很好。