前端开发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中新引入的，兼容性还不是很好。

本文来源于上海网站建设公司与上海网站设计制作公司-垒越科技上海公司！

• 上一篇：用老域名建新网站的利与弊
• 下一篇：企业网站维护有哪些方法与技巧?