用css实现各种情况下的水平垂直居中

作为一个初学者，已被各种情况下的垂直水平居中搞晕，于是乎，记录下我所遇到的一些情况下的垂直水平居中。有错误，欢迎指正哦！哦，这也是我人生中的第一篇博客儿。

一、容器中的元素居中

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;     /* 放在要居中的行内元素上 */
      margin-right:auto;
    }

    

      1.我是块级元素div
    

结果图

• position及负margin（结果图和上面一样）

    .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;
    }

    

      3.我是块级元素div
    

• 绝对定位法（结果图和方法一一样）

   .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会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界 */
      position:absolute;
      top:0;right:0;bottom:0;left:0;
      margin:auto;
    }
    

    

      4.我是块级元素div
    
  

我是从网上查资料得到的绝对定位法，具体参考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;
        }

注：如果不设定box-sizing:border-box，浏览器默认content-box，计算父容器的padding-left的方式就是[（父容器宽度+左右border宽度）-(子容器宽+水平padding宽+左右border宽)]/2
当然，同理可以设置margin

• 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;
        }

这个方法也可以用于“块级元素中的行内元素居中”的情况,不过兼容性不是很好，查是否兼容可以点击http://caniuse.com/

2、块级元素中的行内元素居中

 .div2{
   height:200px;
   width:200px;
   border:1px solid red;
   margin-bottom:20px;
   text-align:center; /* 注意：text－align只作用于块级元素下的文本或行内元素，对块级元素本身和子元素为块级元素无作用 */
   display:table-cell;
   vertical-align:middle; 
 }
 .btn{
   display:inline-block; /* 由于a是行内元素，高宽不可以控制，故display一下 */
   height:50px;
   width:100px;
   border:1px solid blue;
 }

 
   2.我是行内元素a
 

结果图

二、文本居中

1、单行文本居中

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

注：如果里面的文字是p或h1这些标签则要小心，它们有默认的magin和padding值，所以要先清零。或者我们可以直接在css文件开头写个“*{margin:0;padding:0;}”

2、多行文本居中

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

      1.我是块级元素div1.我是块级元素div1.我是块级元素div

结果图

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;
      }

为什么

结果不如人意，为什么呢？因为display：table－cell显示时margin，padding都是没有作用的。因此，遇到这种情况，可以算padding，也可以用上面的方法，只不过元素居中则要改成flexbox的方式（因为这个方式里没有涉及margin）

新方法

    .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会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界 */
      display:inline-block;
      font-size:16px;
      vertical-align:middle;
    }

    

      5.我是块级元素div5.我是块级元素div5.我是块级元素div5.我是块级元素div
  

很多人用这种方法做居中不能理解哎，文本是多行貌似是居中显示，但是是单行就不居中，况且去掉text－align：center；多行也不居中了？菜鸟一枚，求懂者解答，谢谢

总结

我觉得用的最多也是最重要的就是text-align:center 和 margin:0 auto;
作为新手要区分好它们。

  

aaaa

Thank you!