CSS如何實現居中

通常來講：居中有水平居中，垂直居中，徹底居中

水平居中：

 

一、text-align:center;使內容水平居中

二、margin:0 auto;使塊級元素水平居中

 

垂直居中:

 

一、line-height方法

試用於單行文本垂直居中

主要代碼：

css：

.box{
       width:200px;
       height:100px;
       line-height: 100px;/*行高要與自身高度一致才能垂直居中*/
   }

html：

 <div class="box">
     <p>line-height</p>
 </div>

使圖片或inline-block元素垂直居中

前提是外層的line-hight須要和高度一致，同時爲圖片或inline-block元素設置 vertical-align: middle;

css：

.box {
      line-height: 500px;
      height:500px;
  }

.box img {
    vertical-align: middle;}

html：

<div class="box">
       <img src="img.png" alt="" />
 </div>

二、使用table方法

使高度可變元素的居中

   css:

.parent {display: table;}
.child {
    display: table-cell;
    vertical-align: middle;
}
html:

<div  class="parent">
    <div class="child">table-cell</div>
</div>

效果圖：

三、使用絕對定位方法

絕對定位+margin負值

css：

.parent { position:relative;  }

html：

.child {
    position:absolute;
    height:50px;
    top:50%;
    margin-top:-25px;
}

絕對定位實現垂直居中的第二種方法：

css

.parent {  position:relative;  }

.child {
    position:absolute;
    top:0;
    bottom: 0;
    margin:auto 0;//這裏設置了一個上下居中
}

html：

<div  class="parent">

    <div class="child">position:absolute;同時要設置一個相應的margin：auto 0;</div>
</div>


徹底居中 = 水平居中 + 垂直居中

如下羅列兩個：

一、line-height方法+text-align:center;

css：

.box{
       text-align:center;
       width:500px;
       height:100px;
       line-height: 100px;/*行高要與自身高度一致才能垂直居中*/
   }

html：

 <div class="box">
     <p> line-height +text-align:center實現徹底居中</p>

 </div>

二、使用絕對定位 
css

 .parent{ position:relative; }
 .child{
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    margin:auto;//同時設置上下左右居中
 }
html:

<div class="parent">
   <div class="child"></div>
</div>

ps：使用css3 transform使得徹底居中（可是不建議使用）
css

.parent{  position:relative;  }
.child{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
html

<div class="parent">
   <div class="child"></div>
</div>

一樣也能徹底居中，在使用transform的時候，須要加上瀏覽器前綴：谷歌-webkit-transform，火狐-moz-transform