内容水平居中怎么设置css（web前端开发中css水平与垂直居中布局解决方案大全）

欢迎关注！

css水平与垂直居中布局要求子元素在父元素中水平方向和垂直方向上都处于居中位置，并且子元素和父元素的宽度和高度都是可变的。

水平垂直居中布局通用html

设置.parent{display：table-cell；vertical-align：center；}，将父元素上设置为table-cell元素，在table-cell中设置垂直居中，从而实现垂直方向上的居中。

设置.parent{text-align：center；}和.child{display：inline-block；}，将父元素中的子元素设置为水平居中，再将子元素设置为inline-block元素（宽度为内容宽度，可设置宽高），使得text-align属性的设置对子元素也起作用，从而实现水平居中对齐。

将以上两条css合并之后，就可以完整实现水平垂直居中对齐。

评价：兼容性好，代码量稍大。

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

设置.child{position:absolute;top:50%;left:50%;transform(-50%,-50%);},将子元素设置为相对于父元素的绝对定位元素，并将其定位到父元素的中间位置，通过设置transform属性，修正使用left和top定位出现的错误，从而实现水平垂直居中对齐。

评价：绝对定位元素脱离文档流，不会对后续元素造成影响；但是transform属于css3标准定义的属性，兼容性存在问题。

设置.parent{display:flex；justify-content：center；items-align：center；}，该方案看起来比较简单，只需要将父元素设置为flex弹性元素，同时使用弹性元素的justify-content和items-align属性设置子元素在垂直和水平方向上的对齐，最终实现水平和垂直方向的居中。

评价：该方案只需要设置父元素，不需要设置子元素的样式。但是在兼容性上需要补充。

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