CSS水平居中和垂直居中的一些方法开始触及无处不在且一直争论不休的居中问题。CSS居中分为水平居中和垂直居中。水平居中的方法也比较普遍和统一，垂直居中的方法千奇百怪。这篇文章是我积累的一些css居中方法。我已经讨论了块级元素和行内元素的垂直居中和水平居中。特此记录下来，与大家分享。如有不当描述，请指出。o(￣▽￣)Bu本文以下代码中，.outer为父元素的类名，.inner块级代表子元素，span代表内联子元素。水平居中1、内联元素的水平居中，直接设置其父元素。ourter{text-align:center;}不管内联元素有多少，一行代码就搞定，soeasy~2。块级元素的水平居中也很简单na设置块级元素div{margin:0auto;}但！但！如果元素的位置是绝对的，则此方法将失败。我是这样理解的：marginisauto，即相当于外边距的值是自动的，相对的，所以在绝对定位下会失效。但是，您仍然可以将其边距设置为特定值。关于垂直居中有很多垂直居中的技巧。博主这里在对身高没有要求的情况下，只介绍一些简单常用的。1、内联元素的垂直居中1）如果对父元素的高度没有具体要求，父元素只需将元素的padding-toppadding-bottom设置为相同的值即可。.outer{padding-top:60px;padidng-底部：60px；宽度：300px；高度：自动；/*注意：此时父元素的高度不能为具体值*/}2）如果要求父元素的高度为具体值时使用，并保证内联元素不会wrap，可以设置line-height等于父元素的高度。outer{width:300px;height:200px;line-height:200px;/*文本对齐：居中；*/}至此，内联元素的垂直居中就可以实现了。如果加上最后一行，就可以同时实现水平居中和垂直居中了。但！！！确保没有换行符，即只有一行。3）当保持父元素的具体取值宽度不变且多行时，可以使用一些小技巧，比如.outer{text-align:center;height:200px;width:300px;}.outer::before{content:"";height:100%;width:1%;display:inline-block;vertical-align:middle;}/*html代码如下*/
