居中

說到居中，好像每一個前端人都能隨口說出幾個，像耳熟能詳的margin:0 auto,傳說中的line-heght之類的。可是，當每天面對各式各樣的設計稿時，或許你知道的那幾個法寶也不能應對了。

本文就平常重構中遇到的一些情景給出對應的解決方案，並對每種解決方案的優缺點進行簡要歸納。

---

垂直居中

-webkit-box- 居中

     

    <style>
          .wraper {
              background: #DBE6BA;
              height: 300px;
              width: 300px;
              display: -webkit-box;
              -webkit-box-align: center;  //  水平居中
              -webkit-box-pack: center;  //  垂直居中
              -webkit-box-orient: vertical;
          }
      </style>
      <div  class= " wraper ">
          <span>我是文本我居中</span>
          <span>我是文本我居中</span>
          <span>我是文本我居中</span>
          <span>我是文本我居中</span>

      </div>

評價：適用於多行文本，缺點是隻有-webkit內核瀏覽器支持，移動端能夠多使用。

height | line-height 等值居中

   

   <style>
        .wraper {
            background: #DBE6BA;
            height: 90px;
            line-height: 90px;
        }
    </style>
    <div  class= " wraper ">
        <span>我是文本我居中</span>
        <span>我是文本我居中</span>
        <span>我是文本我居中</span>
        <span>我是文本我居中</span>
    </div>

評價：使用於單行文本(圖片也能夠)，缺點是要求父元素高度已知。

padding 居中

    
    <style>
        .wraper {
            background: #DBE6BA;
            padding: 25px;
            width: 560px;
        }
    </style>
    <div  class= " wraper ">
        我是文本我居中
        我是文本我居中
        我是文本我居中
        我是文本我居中
   </div>

   

評價：只是看起來居中，實際上是用padding撐滿父元素而已，=。=。

table-cell 居中

    
    <style type= " text/css "> 
          .inner {
              display: table-cell;
              vertical-align: middle;
          }
          .wraper {
              display: table;
              height: 80px;
              background: #DBE6FD;
          }
      </style> 
      <div  class= " wraper ">
          <div  class= " inner ">
              我是文本我居中
              我是文本我居中
          </div>
     </div>

    

評價：等於移動端用的較多，很適用。不過要注意的是他可能會破壞佈局，要用display破壞原來的block屬性。

absolute 居中

 

    
    <style type= " text/css "> 
        .inner {
            position: absolute;
            position: absolute;
            top:  0;
            bottom:  0;
            left:  0;
            right:  0;
            margin: auto;
            width: 300px;
            height: 100px;
        }
        .wraper {
            width: 400px;
            height: 400px;
            background: #DBE6FD;
            position: relative;
        }
    </style> 
    <div  class= " wraper ">
        <div  class= " inner ">
            我是文本我居中
            我是文本我居中
        </div>
   </div>

評價：要求父元素高度寬度都固定。

  
  <style type= " text/css "> 
          .inner {
              position: absolute;
              height: 100px;
              top:  50%;
              margin-top: -50px: 
          }
          .wraper {
              width: 400px;
              height: 400px;
              background: #DBE6FD;
              position: relative;
          }
  </style> 
  <div  class= " wraper ">
      <div  class= " inner ">
              我是文本我居中
              我是文本我居中
      </div>
 </div>

評價：要求須要居中的元素高度已知。

對於span，img等行內元素，使用vertical-align: middle。

  
  <style>
        p {
            background: #DBE6FD;
            height: 100px;
        }
        img {
            vertical-align: middle;
        }
    </style>
    <p>
        <img align= " absmiddle " src= " qq.png " alt= " qq ">
        我是圖片後的文字，我要居中
   </p>

圖片和文本要圖片居中，能夠使用<img src=」」 align=」absmiddle」 />

  
  <style>
        p {
            background: #DBE6FD;
            text-align: center;
        }
    </style>
    <p>
        <img align= " absmiddle " src= " qq.png " alt= " qq ">
        我是圖片後的文字，我要居中
   </p>

   

水平居中

text-align 居中

  
    <style>
        p {
            background: #DBE6FD;
            text-align: center;
        }
    </style>
    <p>
        <span>我要水平居中！</span>
    </p>

  

評價： 限於文本和圖片等內聯元素。

margin: 0 auto; 居中

    
    <style>
        .outer {
            background: #DBE6FD;
        }
        .inner {
            background: #F3F3F3;
            width:  80%;
            margin:  0 auto;
        }
    </style>
    <div  class= " outer ">
        <div  class= " inner ">
            <p>我是內容我居中</p>
            <p>我是內容我居中</p>
            <p>我是內容我居中</p>
            <p>我是內容我居中</p>
        </div>
   </div>

   

評價：只對於塊級元素有效。

absolute

     

    <style>
          .outer {
              background: #DBE6FD;
              position: relative;
          }
          .inner {
              background: #F3F3F3;
              position: relative;
              left:  50%;
              width: 400px;
              margin-left: -200px;
          }
      </style>
      <div  class= " outer ">
          <div  class= " inner ">
              <p>我是內容我居中</p>
              <p>我是內容我居中</p>
              <p>我是內容我居中</p>
              <p>我是內容我居中</p>
          </div>

      </div>

評價：只對寬度已知的元素有效。

總結：以上每種方法都有本身的優勢和缺點，對於特定場景，選用適合此場景的方法便可。

補充

box-flex：佈局的垂直等高、水平均分、按比例劃分。

     

    <style>
        .wraper {
            display: box;
        }
        .sectionOne {
            box-flex:  3;
        }
        .sectionTwo {
            box-flex:  2;
        }
        .sectionThree {
            box-flex:  1;
        }
    </style>
    <article  class= " wrap ">
        <section  class= " sectionOne "> 01</section>
        <section  class= " sectionTwo "> 02</section>
        <section  class= " sectionThree "> 03</section>
    </article>

 

說明：

1.    父元素必須爲display:box（此時容器定義爲內聯元素，使用margin：0 auto無效，要在父元素上使用text-aglin:center.）

2.    若是其中一個子元素設置了固定寬度，該子元素直接應用設置的寬度，其餘的在按比例平分剩下的。

 

box屬性：

box-orient box-direction(排列順序，reverse|normal)

box-align（父容器裏面子容器的垂直對齊方式 start | end | center | baseline | stretch）

box-pack(子容器的水平對齊方式 start | end | center | justify)