css居中和对齐方法集锦

文本内容居中

单行文字 ： line-height + text-align:center or margin:0 auto

 .div1 {   
  width:500px;
  height:25px;   
  border:5px solid #d8d8d8;
  text-align:center;   /*子元素水平居中*/
  line-height:25px;    /*设置line-height,和高相等，即可垂直居中*/
  overflow:hidden;    /*后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。*/
}   

.span1{
  /*
  width:100px;
  display: block;
  margin:0 auto;
  */     

/*
  这几个属性组合使用可以达到水平居中的效果，但要使margin:0 auto生效要满足以下条件
  块级元素（display:block or display:table）
  非浮动元素
  非固定或绝对定位元素
  宽度不能是auto
*/
}

        
<div class="div1">
       <span class="span1">单行文字已知宽高居中；<span>
</div>

多行文字:display:table + display:table-cell + vertical-align:middle

  IE 6 不能正确地理解display:table和display:table-cell，因此这种方法在IE6及以下的版本中是无效的。
  处理多行文字的诀窍是用标签包起来当做一个元素（如span）来做水平垂直居中处理,这样水平垂直居中的方法都可以应用在这里。

.div2{
  display:table-cell;
  width:500px;
  height:auto;
  padding:0 0.1em;
  border:4px solid #d8d8d8;
  color:#069; 
  vertical-align:middle;  /*CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
}
.span2{
  display:inline-block;
  width:100%;
  height:50%;
  font-size:1em;
  overflow-y:auto;
}
.div2-1{
  display:table;
  width:500px;
  height:500px;
  padding:0 0.1em;
  border:4px solid #d8d8d8;
  color:#069; 
}
.span2-1{
  display:table-cell;
  font-size:1em;
  vertical-align:middle;
}


<div class="div2">
           <span class="span2">
                2；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；
          </span>
</div>

<div class="div2-1">
          <span class="span2-1">  
                2-1；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；多行文字已知宽高垂直居中；
         </span>
</div>

  其实文字居中最简单的方法就是设定Padding，使上下或左右的padding值相同即可。这是一种“看起来”的垂直居中方式，它使文字完全填充 <div>。

position + 负margin方法

  该方法兼容 IE6 - IE7，但是要已知元素宽高，不支持百分比尺寸和 min-/max- 属性。

.div5{
  position:relative;
  height:50%;
  width:50%;
  border:4px solid #d8d8d8;
}
.span5{
 width:50px;
 height:50px;
 border:4px solid #d8d8d8;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-25px;
 margin-left:-25px;
}

<div class="div5">
          <span class="span5">
            position top margin  负边距定位
          </span>
</div>

position+ transform方法

  这种方法原理和负边距方法一样，不过不用确定居中元素的宽高，但也有一些坑， 可能干扰其他 transform 效果，如有其他transform需要合写，不利于解耦。
  其次， 使用transform可能导致元素内字体出现模糊，主要是因为使用了transform 3D变换,3D变换会开启GPU加速，GPU加速动画时，并不是把原生DOM传递给GPU，它生成一个元素图像，把该图像发送到GPU，GPU将图像应用为多边形纹理贴图代表元素，GPU可以流畅快速的对这些多边形进行旋转，缩放，转换，倾斜等变换，但由于只是传递元素图像到GPU进行处理，所以它并不能重新渲染内容，图像清晰度不能保证，元素显示清晰度自然就下降了。（后来用了别的居中方法。。）

.div3{
 position:relative;
 height:50%;
 width:50%;
 border:4px solid #d8d8d8;
}
.span3{
width:50px;
height:50px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*
  transform:translateY(-50%);
  transform:translateX(-50%);
 */
border:4px solid #d8d8d8;
}

<div class="div3">
        <span class="span3">
           transform
        </span>
</div>

绝对居中定位方法

  元素的宽高支持百分比 % 属性值和 min-/max- 属性

.div6{
  position:relative;
  height:100%;
  width:100%;
  border:4px solid #d8d8d8;
}
.span6{
 width:50%;
 height:50%;
 border:4px solid #d8d8d8;
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
 margin: auto auto;
}

    
<div class="div6">
         <span class="span6">
            position top bottom margin 绝对居中定位
         </span>
</div>

flexbox 布局

  子元素为浮动，绝对定位，内联元素，都可以实现居中，但要ie11+才支持，可以用babel来polyfill

.div4{
  display:flex;
  height:50%;
  width:50%;
  border:4px solid #d8d8d8;
  align-items:center;
  justify-content:center;
}
.span4{
 width:50px;
 height:50px;
 border:4px solid #d8d8d8;
} 
 

  <!--未知父元素宽高 子元素垂直居中;flex -->
<div class="div4">
         <span class="span4">
            flex
         </span>
</div>

box布局

.div8{
width:50%;             
height:50%;             
display:-webkit-box;             
-webkit-box-pack:center;             
-webkit-box-align:center;             
border:4px solid #d8d8d8;
}
.span8{
width:50px;
height:50px;
border:4px solid #d8d8d8;
} 

<div class="div8">
         <span class="span8">
            display:-webkit-box
         </span>
</div>

:before伪元素方法

  该方法是利用vertical-align的基线原理，假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置， 如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了

.div9{           
   /* position:fixed;         
    display:block;           
    top:0;       
    right:0;         
    bottom:0;           
    left:0;            */
    width:50%;
    height:50%;
    text-align:center;
    border:4px solid #d8d8d8;           
    /*background:rgba(0,0,0,.5);*/
}
.div9:before{           
   content:'';           
   display:inline-block;           
   vertical-align:middle;           
   height:100%;
  }
 .div9 .span9{           
   display:inline-block;         
   vertical-align:middle;         
   width:50px;           
   height:50px;           
   line-height:50px;                   
   border:4px solid #d8d8d8;
  }

<div class="div9">
         <span class="span9">
            :before
         </span>
</div>

table-cell + vertical-align居中

  这个已经在多行文字例子做了介绍

附录

注1：

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。常见用法:

<td valign="middle"> <!-- 这是一种会逐渐被淘汰的用法 --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

<img align="middle" ...>
<img style="vertical-align:middle" ...>
<span style="display:inline-block; vertical-align:middle"> ... </span>

注2：若要兼容ie6+的浏览器，可能需要css hack

      div#wrap {   
        display:table;   
        border:4px solid #d8d8d8;
        width:500px;   
        height:400px;   
        _position:relative;   
        overflow:hidden;   
        text-align:center;
      }   
      div#subwrap {   
        vertical-align:middle;   
        display:table-cell;   
        _position:absolute;   
        _top:50%;   
      }   
      div#content {   

        _position:relative;   
        _top:-50%;   
      }   

<div id="wrap">   
      <div id="subwrap">   
        <div id="content">
          组和两种居中方案 css hack
        </div>   
      </div>   
</div>