主要针对CSS各种居中布局方法为大家进行详细汇总，感兴趣的小伙伴们可以参考一下

本篇文章讨论居中情况设定为总宽度不定,内容宽度不定的情况。（改变大小时，仍然居中）。 特别说明：在元素设置position:absolute;来设置居中效果时，除去博客下介绍的css3方法外，还可以使用负的margin来居中，这样解决了兼容性的问题，但是只适用于宽高已知的情况（因为负的偏移量为元素宽高的一半）。宽高改变时，不再是居中效果。 在这些布局中的子元素，因为其属性设置，都默认为内容宽度。 本文所有居中的例子，只讨论css的实现，html代码统一如下： CSS Code复制内容到剪贴板

目录 CSS水平居中 文本水平居中 单个块级元素水平居中 多个水平排列的块级元素 水平居中 多个垂直排列的块级元素 水平居中 CSS垂直居中 单行文本垂直居中 多行文本垂直居中 方法1：使用table布局 方法2：设置vertical-align，line-height 方法3：使用flex布局 方法4：设置伪元素 块级元素垂直居中 方法1：flex布局 方法2：设置absolute和margin 方法3：设置absolute和transform:translate(-50%,-50%) CSS