居中效果在CSS中很是普通的效果，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法。当然大家有可能认为这些方法对于浏览嘎嘎的兼容性处理太麻烦了。
二、六种方法
常见的居中是固定宽度，加上margin: 0 auto。但是如果宽度不明确，我们也要尝试一下。
我们来实现一个分页容器
html
<div class="pagination"> <ul> <li><a href="#">Prev</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">Next</a></li> </ul> </div> .pagination li{ line-height: 25px; list-style: none; display: inline; float: left; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }展示：
1、方法一：margin和width实现
这个是最常见的方案：在容器上定义一个固定的宽度，然后配合margin左右的值为auto。
css
.pagination{ width: 340px; margin: 0 auto; } .pagination li{ line-height: 25px; list-style: none; display: inline; float: left; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }展示
效果实现了，扩展性不强，因为宽度无法确定，也就无法确定容器宽度。
优点：实现简单，浏览器兼容性强
缺点：扩展性差，无法自适应未知情况。
2、方法二：inline-block和父元素text-align
仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果：
body{ background: #000; text-align: center; } .pagination{ margin-top: 50px; display: inline-block; } .pagination li{ line-height: 25px; list-style: none; display: inline; float: left; } .pagination a{ text-decoration: none; display: block; color: #000; padding: 0 10px; border-radius: 2px; border: 1px solid #F2F2F2; background: #333; } .pagination a:hover{ background: orange; }显示
这个方法也是比较简单易懂，inline-block解决了水平居中的问题，但是又有一个新的问题--空白间距，所以需要解决inline-block带来的间距。
优点：简单易懂，扩展性强
缺点：需要额外处理inline-block的浏览器兼容性问题
3、方法三：浮动实现水平居中