css置中常見寫法

標籤：20px   css   ddl   code   splay   垂直置中   firefox   垂直   利用   

1、最常見的水平置中寫法

 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>

2、利用css3的新特性，做水平置中

    .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>

3、垂直置中

<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>

4、利用css3新特性，垂直置中

<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>

5、水平垂直置中:可以利用2和4綜合得出絕對置中效果，1和3綜合需要在外層div加上text-align:center

css置中常見寫法