前端CSS_如何让元素水平垂直居中?

居中效果在CSS中很是普通的效果，居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。
常用的水平居中的实现方案如下，给定一个显示的宽度，将margin左右值设置为auto。如下：

.textCenter {
    width: 1000px;
    margin-left: auto;
    margin-right: 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>

CSS：

.pagination li {
            line-height: 25px;
            display: inline;
        }

        .pagination a {
            text-decoration: none;
            display: block;
            color: #f2f2f2;
            text-shadow: 1px 0 0 #101011;
            padding: 0 10px;
            border-radius: 2px;
            box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
            background: linear-gradient(#434345, #2f3032);
        }

        .pagination a:hover {
            text-decoration: none;
            box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
            background: linear-gradient(#f48b03, #c87100);
        }

总共举例4个例子，实现元素水平垂直居中。
1.inline-block实现水平居中方法
仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果：

.pagination {
            text-align: center;
            font-size: 0;
            letter-spacing: -4px;
            word-spacing: -4px;
        }

        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            display: inline-block;
            *display: inline;
            zoom: 1;
            letter-spacing: normal;
            word-spacing: normal;
            font-size: 12px;
        }

        .pagination a {
            text-decoration: none;
            display: block;
            color: #f2f2f2;
            text-shadow: 1px 0 0 #101011;
            padding: 0 10px;
            border-radius: 2px;
            box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
            background: linear-gradient( #434345, #2f3032);
        }

        .pagination a:hover {
            text-decoration: none;
            box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
            background: linear-gradient(#f48b03, #c87100);
        }

页面如下:

2.浮动实现水平居中的方法
其实浮动也可用来实现水平居中。

.pagination {
            float: left;
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .pagination ul {
            clear: left;
            float: left;
            position: relative;
            left: 50%;
            /*向右边移动宽度的50%*/
            text-align: center;
        }

        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            display: block;
            float: left;
            position: relative;
            right: 50%;
            /*向左边移动宽度的50%*/
        }

        .pagination a {
            text-decoration: none;
            display: block;
            color: #f2f2f2;
            text-shadow: 1px 0 0 #101011;
            padding: 0 10px;
            border-radius: 2px;
            box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
            background: linear-gradient(#434345, #2f3032);
        }

        .pagination a:hover {
            text-decoration: none;
            box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
            background: linear-gradient(#f48b03, #c87100);
        }

页面如下:

这种方法实现和前面的与众不同，使用了浮动配合position定位实现。

3.fit-content实现水平居中方法
“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可以轻松的实现水平居中的效果：

 .pagination ul {
            width: -moz-fit-content;
            width: -webkit-fit-content;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            float: left;
        }

        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            float: left;
            display: inline;
        }

        .pagination a {
            text-decoration: none;
            display: block;
            color: #f2f2f2;
            text-shadow: 1px 0 0 #101011;
            padding: 0 10px;
            border-radius: 2px;
            box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
            background: linear-gradient(#434345, #2f3032);
        }

        .pagination a:hover {
            text-decoration: none;
            box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
            background: linear-gradient(#f48b03, #c87100);
        }

页面如下:

4.flex实现水平居中方法
CSS3的flex是一个很强大的功能，她能让我们的布局变得更加灵活与方便，唯一的就是目前浏览器的兼容性较差。

.pagination {
            display: flex;
            flex-wrap:nowrap;
            justify-content:center; 
        }

        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            float: left;
            display: inline;
        }

        .pagination a {
            text-decoration: none;
            /* display: block; */
            color: #f2f2f2;
            text-shadow: 1px 0 0 #101011;
            padding: 0 10px;
            border-radius: 2px;
            box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
            background: linear-gradient(#434345, #2f3032);
        }

        .pagination a:hover {
            text-decoration: none;
            box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
            background: linear-gradient(#f48b03, #c87100);
        }

页面如下: