居中

说到居中，好像每个前端人都能随口说出几个，像耳熟能详的margin:0 auto,传说中的line-heght之类的。但是，当天天面对各式各样的设计稿时，或许你知道的那几个法宝也不能应对了。

本文就日常重构中遇到的一些情景给出对应的解决方案，并对每种解决方案的优缺点进行简要概括。

---

垂直居中

-webkit-box- 居中

     

    <style>
          .wraper {
              background: #DBE6BA;
              height: 300px;
               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;
             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;
             300px;
            height: 100px;
        }
        .wraper {
             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 {
               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;
             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%;
               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)