整体布局垂直居中css（web前端开发中css垂直居中布局解决方案大全）

欢迎关注！

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

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

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

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

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

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

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

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

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

收藏转发请先关注，谢谢支持！