正常元素、浮动元素以及绝对定位元素的居中方式

一、元素的水平居中

1、行内元素的水平居中

利用父元素设置text-align:center;

  <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">    
  <span>行级元素垂直居中</span>     
  </div> 

2、块级元素的水平居中

利用margin： 0 auto;

<div style="width: 200px; height: 200px;border: 1px solid;text-align: center;">  
   <div style="border: 1px solid red;margin: 0 auto;height: 150px;width: 180px;"> 块级元素</div>  
</div>  

3、浮动元素的水平居中

宽度固定的浮动元素：relative:left:50%

.outerbox{  
    background-color:red;
	width:500px;
	height:300px;
    margin:-150px 0 0 -250px;
    position:relative;   
    left:50%;  
	top:50%;
 }  

宽度不固定的浮动元素：

.outerbox{  
    float:left;
    position:relative;   
    left:50%;  
 }  
.innerbox{    
   float:left;   
   position:relative;   
   right:50%	
   color:red;
  } 

  <div class="outerbox">  
      <div class="innerbox">我是浮动的</div>  
  </div>  

4、绝对定位的元素水平居中  left:0和right:0不可省略

.center{
    position:absolute;
    width:500px;
    height:300px;
    background-color:red;
    margin: 0 auto;
    left:0;
    right:0;
}

二、元素的垂直居中

1、行级元素的垂直居中（height和line-height的设置）

2、块级元素的垂直居中

父元素高度固定：父元素的height和line-height保持一致  居中元素的vertical-align:middle display:inline  inline-block;

  1. .center{  
  2.     width: 500px;  
  3.     height:300px;  
  4.     line-height: 300px;  
  5.     border:1px solid;  
  6. }  
  7.  .inner{  
  8.      background: blue;  
  9.      width: 300px;  
  10.      height: 100px;  
  11.      display: inline-block;  
  12.      vertical-align: middle;  
  13.  }  

  <div class="center">  
      <div class="inner"></div>  
  </div>

父级元素高度不固定：父元素的padding-top=padding-bottom即可