元素水平居中的方法

<!-- （1）对于行内元素或具有inline-block属性的元素居中，比如span,img等可以使用text-align:center来实现 -->

.box1{
            width: 200px;
            border: 1px solid #000;
            text-align:center;
        }

.son1{
            width:100px;
            background-color:#ddd;
        }
<div class="box1">
        <span class="son1">我是span元素</span>
    </div>

 <!-- (2)使用margin:0 auto

                使用margin：auto的方式与第一种不同的是，这种css属性作用域元素本身，

                且必须给元素设定了宽度和具有display:block的块级元素

    -->

.box2{
            width: 200px;
            border: 1px solid #000;
        }
        .son2{
            width: 150px;
            background-color:#ddd;
            display:block;
            margin:0 auto;
        }
<div class="box2">
        <span class="son2">我是span元素</span>
    </div>

<!-- (3)定位居中 ：这种方式的好处是行内元素和块级元素都适用，但是需要知道元素本身的宽度 -->

.box3{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            position:relative;
        }
        .son3{
            width: 150px;
            height: 50px;
            background-color:#ddd;
            position:absolute;
            left:25px;
            top:75px;
        }
<div class="box3">
        <span class="son3">我是span元素</span>
    </div>

<!-- (4)margin:auto与定位组合使用:这种方式的好处是行内元素和块级元素都适用，但是需要知道元素本身的宽度 -->

.box4{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            position:relative;
        }
        .son4{
            width: 150px;
            height: 50px;
            background-color:#ddd;
            position:absolute;
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
        }
 <div class="box4">
        <span class="son4">我是span元素</span>
    </div>

<!-- (5)负margin 和定位组合使用:这种方式的好处是行内元素和块级元素都适用，但是需要知道元素本身的宽度  -->

.box5{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            position:relative;
        }

        .son5{
            width:150px;
            height:50px;
            background-color:#ddd;
            position:absolute;
            left:50%;
            top:50%;
            margin:-25px 0 0 -75px;
        }
<div class="box5">
        <span class="son5">我是span元素</span>
    </div>

 

 

 

<!-- (7)translate 和定位组合使用： -->

.box7{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            position:relative;
        }
        .son7{
            width: 150px;
            height: 50px;
            background-color:#ddd;
            position:absolute;
            left:50%;
            top:50%;
            -webkit-transform: translate(-50%,-50%);
               -moz-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
                 -o-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
        }
<div class="box7">
        <span class="son7">我是span7元素</span>
    </div>

<!-- (8)使用flex居中：使用flex居中不需要知道元素本身的宽高及元素的属性 -->

 .box8{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            display:-webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .box8>span{
            background-color:#ddd;
        }
<div class="box8">
        <span>我是span8元素</span>
    </div>

<!-- (9)使用table-cell居中：需要添加额外的元素作为外部容器 -->

.box9{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            display:table;
        }
        .center-core{
            display:table-cell;
            text-align:center;
            vertical-align:middle;
        }
<div class="box9">
        <div class="center-core">
            <span>我是span9元素</span>
        </div>
    </div>