作為一個初學者，已被各種情況下的垂直水平居中搞暈，于是乎，記錄下我所遇到的一些情況下的垂直水平居中。有錯誤，歡迎指正哦！哦，這也是我人生中的第一篇博客兒。

一、容器中的元素居中

1、塊級元素中的塊級元素居中（ps：注意看代碼中的注釋部分哦）

• margin和table-cell

.div1{
      height:200px;
      width:200px;
      border:1px solid red;
      margin:20px;
      display:table-cell;  /* 由于table－cell方式顯示時，margin，padding都不起作用，但是不影響子元素 */
      vertical-align:middle;
    }
    .test{
      height:50px;
      width:100px;
      border:1px solid blue;
      margin-left:auto;     /* 放在要居中的行內(nèi)元素上 */
      margin-right:auto;
    }
<div class="div1">
    <div class="test">
      1.我是塊級元素div
    </div>
</div>

結(jié)果圖

• position及負margin（結(jié)果圖和上面一樣）

    .div3{
      height:200px;
      width:200px;
      border:1px solid red;
      margin-top:20px;
      position:relative;
    }
    .test3{
      height:50px;
      width:100px;
      border:1px solid blue;
      position:absolute;
      top:50%;
      left:50%;
      margin-top:-25px;
      margin-left:-50px;
    }
<div class="div3">
    <div class="test3">
      3.我是塊級元素div
    </div>
</div>

• 絕對定位法（結(jié)果圖和方法一一樣）

   .div4{
      height:200px;
      width:200px;
      border:1px solid red;
      margin-top:20px;
      position:relative;
    }
    .test4{
      height:50px;
      width:100px;
      border:1px solid blue;
      overflow:auto;   /* 加上overflow: auto會在內(nèi)容高度超過容器高度的情況下給內(nèi)容塊顯示滾動條而不越界 */
      position:absolute;
      top:0;right:0;bottom:0;left:0;
      margin:auto;
    }
    <div class="div4">
    <div class="test4">
      4.我是塊級元素div
    </div>
  </div

我是從網(wǎng)上查資料得到的絕對定位法，具體參考http://blog.csdn.net/freshlover/article/details/11579669

• padding法（父容器和子容器都要是固定高度，才能計算padding）

.div1{
            height:200px;
            width:200px;
            border:1px solid red;
            margin:20px;
            box-sizing:border-box;/*這里計算父元素padding-left的方法為(父元素寬度-子元素寬度)/2*/
            padding-left:50px;   /* (200-100)/2 */
            padding-top:75px;
        }
        .test{
            height:50px;
            width:100px;
            border:1px solid blue;
        }

<b>注：如果不設(shè)定box-sizing:border-box，瀏覽器默認content-box，計算父容器的padding-left的方式就是[（父容器寬度+左右border寬度）-(子容器寬+水平padding寬+左右border寬)]/2
當然，同理可以設(shè)置margin
<b>

• flex布局

.div1{
            height:200px;
            width:200px;
            border:1px solid red;
            margin:20px;
            display:flex;
            justify-content:center; /* flex布局 */
            align-items:center;
        }

        .test{
            height:50px;
            width:100px;
            border:1px solid blue;
        }

<b>這個方法也可以用于“塊級元素中的行內(nèi)元素居中”的情況,不過兼容性不是很好，查是否兼容可以點擊http://caniuse.com/<b>

2、塊級元素中的行內(nèi)元素居中

 .div2{
   height:200px;
   width:200px;
   border:1px solid red;
   margin-bottom:20px;
   text-align:center; /* 注意：text－align只作用于塊級元素下的文本或行內(nèi)元素，對塊級元素本身和子元素為塊級元素無作用 */
   display:table-cell;
   vertical-align:middle; 
 }
 .btn{
   display:inline-block; /* 由于a是行內(nèi)元素，高寬不可以控制，故display一下 */
   height:50px;
   width:100px;
   border:1px solid blue;
 }
<div class="div2">
 <a href="#" class="btn">
   2.我是行內(nèi)元素a
 </a>
</div>

結(jié)果圖

二、文本居中

1、單行文本居中

.div1{
      height:200px;
      width:200px;
      border:1px solid red;
      line-height:200px;
      text-align:center;
    }

<b>注：如果里面的文字是p或h1這些標簽則要小心，它們有默認的magin和padding值，所以要先清零?；蛘呶覀兛梢灾苯釉赾ss文件開頭寫個“*{margin:0;padding:0;}”<b>

2、多行文本居中

.div1{
      height:200px;
      width:200px;
      border:1px solid red;
      text-align:center;
      display:table-cell;  
      vertical-align:middle; 
    }
<div class="div1">
      1.我是塊級元素div1.我是塊級元素div1.我是塊級元素div
</div>

結(jié)果圖

3、多行文本居中的特殊情況

.div1{
          height:200px;
          width:200px;
          border:1px solid red;
          margin:20px;
          display:table-cell; 
          vertical-align:middle;
      }

      .test{
          height:50px;
          width:100px;
          border:1px solid blue;
          margin-left:auto;     
          margin-right:auto;
          text-align:center;
          display:table-cell; 
          vertical-align:middle;
      }

為什么

<b>結(jié)果不如人意，為什么呢？因為display：table－cell顯示時margin，padding都是沒有作用的。因此，遇到這種情況，可以算padding，也可以用上面的方法，只不過元素居中則要改成flexbox的方式（因為這個方式里沒有涉及margin）<b>

新方法

    .div5{
      height:200px;
      width:200px;
      border:1px solid red;
      margin-top:20px;
      font-size:0;
      text-align:center;
    }
    .div5:after{
      content:'';
      height:100%;
      display:inline-block;
      vertical-align:middle;
    }
    .test5{
      overflow:auto;   /* 加上overflow: auto會在內(nèi)容高度超過容器高度的情況下給內(nèi)容塊顯示滾動條而不越界 */
      display:inline-block;
      font-size:16px;
      vertical-align:middle;
    }
<div class="div5">
    <div class="test5">
      5.我是塊級元素div5.我是塊級元素div5.我是塊級元素div5.我是塊級元素div
  </div>

很多人用這種方法做居中不能理解哎，文本是多行貌似是居中顯示，但是是單行就不居中，況且去掉text－align：center；多行也不居中了？菜鳥一枚，求懂者解答，謝謝

總結(jié)

我覺得用的最多也是最重要的就是text-align:center 和 margin:0 auto;
作為新手要區(qū)分好它們。

  <style>
    p{
      width:200px;
      background-color:red;
      margin:0 auto;  /* 讓p元素在父元素中水平居中 */
      text-align:center;  /*  讓p元素內(nèi)的文本居中 */
    }
  </style>
<body>
<p>aaaa</p>
</body>

Thank you!