css居中常见写法

 1  .box-center{
 2         width: 100%; 
 4         background-color: darkgrey;
 5         height: 100px;
 6     }
 7     .box-child{
 8         width: 30%;
 9         height: 50px;
10         background-color: #00a5e0;
11         margin: auto;
12     }
13 <div class="box-center">
14     <div class="box-child"></div>
15 </div>

    .box-center1 {
        width: 100%;
        background-color: darkgrey;
        height: 100px;
        /* Firefox */
        display: -moz-box;
        -moz-box-pack: center;

        /* Safari, Chrome, and Opera */
        display: -webkit-box;
        -webkit-box-pack: center;
        /* w3c*/
        display: box;
        box-pack: center;

    }
    .box-child1 {
        width: 30%;
        height: 50px;
        background-color: #00a5e0;
    }

<div class="box-center1">
    <div class="box-child1">
    </div>
</div>

<style>
    .box-center2 {
        line-height: 200px;
        width: 100%;
        height: 200px;
        background-color: darkgrey
    }

    .box-child2 {
        display: inline-block;
        line-height: 20px;
        padding: 20px;
        background-color: #cd0000;
        color: #fff;
        vertical-align: middle;

        width: -webkit-fill-available;
        width: -moz-fill-available;
        width: -moz-available; /* FireFox目前这个生效 */
        width: fill-available;
    }
</style>
<div class="box-center2">
    <div class="box-child2">
    </div>
</div>

<style>
    .box-center3 {
        line-height: 200px;
        width: 100%;
        height: 200px;
        background-color: darkgrey;
        /* Firefox */
        display: -moz-box;
        -moz-box-align: center;

        /* Safari, Chrome, and Opera */
        display: -webkit-box;
        -webkit-box-align: center;

        /*w3c */
        display: box;
        box-align: center;
    }

    .box-clild3{
        background-color: #cd0000;
        color: #fff;
        width: 100%;
        height: 50px;
    }
</style>
<div class="box-center3">
    <div class="box-clild3"></div>
</div>