CSS - 垂直水平居中方法

參考連接

整理搬運css垂直水平居中方法，區份內聯元素與塊級元素

• CSS垂直居中和水平居中
• 【原】用css讓一個容器水平垂直

---

內聯元素居中方法

水平居中設置:

• 行內元素 設置 text-align:center;
• Flex佈局 設置display:flex;justify-content:center;(靈活運用)

垂直居中設置：

• 父元素高度肯定的單行文本（內聯元素），垂直居中：

  設置 height = line-height；

• 父元素高度肯定的多行文本（內聯元素），垂直居中：

  先設置 display:table-cell 再設置 vertical-align:middle；

• 若是在塊級元素中包裹有多個行內元素，其中某個元素比較特殊，好比：大寫加粗的文字、圖片圖標，垂直居中：

  該元素設置 { vertical-align: middle; }
/* 同時對應 text-bottom/text-top 爲下對齊/上對齊 */

---

塊級元素居中方法

移動端，選用方法六和方法七，支持不定寬高的狀況
PC端，要考慮兼容性的話，能夠選用方法四
PC端，若是中間的元素高度不固定，能夠選用方法五

1. 方法一：position加margin
   兼容性：主流瀏覽器均支持，IE6不支持

   <!-- html -->
   <div class="wrap">
       <div class="content"></div>
   </div>
   
   /**css**/
   .wrap {
       position: relative;
       width: 200px;
       height: 200px;
       background: pink;
   }
   .wrap .content{
       position: absolute;
       width: 100px;
       height: 100px;
       background: skyblue;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       margin: auto;
   }

2. 方法二： diaplay:table-cell
   兼容性：因爲display:table-cell的緣由，IE67不兼容

   <!-- html -->
   <div class="wrap">
        <div class="content"></div>
   </div>
   
   /*css*/
   .wrap{
       width: 200px;
       height: 200px;
       background: pink;
       display: table-cell;
       vertical-align: middle;
       text-align: center;
   }
   .content{
       display: inline-block;
       vertical-align: middle;
       width: 100px;
       height: 100px;
       background: skyblue;
   }

3. 方法三：position加 transform
   兼容性：ie9如下不支持 CSS3新屬性transform，移動端表現較好

   <!-- html -->
   <div class="wrap">
       <div class="content"></div>
   </div>
   
   /* css */
   .wrap {
       position: relative;
       background: pink;
       width: 200px;
       height: 200px;
   }
   .content{
       position: absolute;
       background: skyblue;
       top:50%;
       left:50%;
       -webkit-transform:translate(-50%,-50%);
       transform:translate(-50%,-50%);
       width: 100px;
       height: 100px;
   }

4. 方法四：position（固定寬高）
   兼容性：適用於全部瀏覽器

   <!-- html -->
   <div class="wrap">
      <div class="content"></div>
   </div>
   
   /* css */
   .wrap {
       background: pink;
       width: 200px;
       height: 200px;
       position: relative;
   }
   .content{
       background: skyblue;
       position: absolute;
       width: 100px;
       height: 100px;
       left: 50%;
       top: 50%;
       margin-left:-50px;
       margin-top:-50px;
   }

5. 方法五：兼容低版本瀏覽器，不固定寬高

   <!-- html -->
   <div class="table">
       <div class="tableCell">
           <div class="content">不固定寬高，自適應</div>
       </div>
   </div>
   
   /*css*/
   .table {
       height: 200px;/*高度值不能少*/
       width: 200px;/*寬度值不能少*/
       display: table;
       position: relative;
       float:left;
       background: pink;
   }      
   
   .tableCell {
       display: table-cell;
       vertical-align: middle;
       text-align: center;        
       *position: absolute;
       padding: 10px;
       *top: 50%;
       *left: 50%;
   }
   .content {
       *position:relative;
       *top: -50%;
       *left: -50%;
        background: skyblue;
   }

6. 方法六：flex;align-items: center;justify-content: center
   適合移動端

   <!-- html -->
   <div class="wrap">
       <div class="content"></div>
   </div>
   
   /* css */
   .wrap {
       background: pink;
       width: 200px;
       height: 200px;
       display: flex; 
       /*垂直居中*/
       align-items: center; 
       /*水平居中*/
       justify-content: center;
   }
   .content{
       background: skyblue;
       width: 100px;
       height: 100px;
   }

7. 方法七：display:flex;margin:auto
   適合移動端

   <!-- html -->
   <div class="wrap">
      <div class="content"></div>
   </div>
   
   /* css */
   .wrap {
       background: pink;
       width: 200px;
       height: 200px;
       display: flex; 
   }
   .content{
       background: skyblue;
       width: 100px;
       height: 100px;
       margin: auto;
   }