居中

说到居中，好像每一个前端人都能随口说出几个，像耳熟能详的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)