CSS居中方法搜集

转自这里：http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/

兼容低版本IE的方法

• html使用表格结构
• 背景图片居中
• 使用css表达式
• 绝对定位居中
• display:inline-block
• writing-mode方法
• 负margin(实现必须知道定位元素的宽高)

只适合高级浏览器的方法

• 使用button作为容器
• 借助一个img标签，本质也是display:inline-block;
• CSS3中的translate属性
• 绝对定位法(top: 0; left: 0; bottom: 0; right: 0;)
• CSS3 FlexBox

代码展示

绝对定位

<div class="container">
      <p><img src="" /></p>
</div>

<style type="text/css">
      div {
       /*IE8与标准游览器垂直对齐*/
        display:table-cell;
        vertical-align:middle;
        overflow:hidden;
        position:relative;
        text-align:center;
        width:500px;/*装饰*/
        height:500px;
        border:1px solid #ccc;
        background:#B9D6FF;
      }
      div p {
        +position:absolute;
        top:50%
      }
      img {
        +position:relative;
        top:-50%;
        left:-50%;
      }
  </style>

CSS表达式

<div class="container">  
      <img  />  
</div> 

.container{  
        /*IE8与标准游览器垂直对齐*/
        display: table-cell;
        vertical-align:middle; 
        width:500px;/*装饰*/
        height:500px;  
        background:#B9D6FF;  
        border: 1px solid #CCC;  
      }  
      .container img{  
        display:block;/*让其具备盒子模型*/
        margin:0 auto;  
        text-align:center;
        margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */
      } 

display:inline-block

<div class="container">
      <i></i>
      <img />
</div>

    <style type="text/css">
      div {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        width:500px;
        height:500px;
        background:#B9D6FF;
        border: 1px solid #CCC;
      }

    </style>
    <!--[if IE]>
<style type="text/css">
i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
img {
    vertical-align:middle
    }
</style>
<![endif]-->

writing-mode

<div class="container">
      <span>
        <img />
      </span>
</div>

div{
        width:500px;
        height:500px;
        line-height:500px;
        text-align:center;
        background:#B9D6FF;
        border:1px solid #f00;
      }
      div span{
        height:100%9;
        writing-mode:tb-rl9;
      }
      div img{
        vertical-align:middle
      }

使用button 居中  IE下点击会有1px down and right

<button>
        <img src="" />
</button>

引入一个无语义的 img

<div class="itm">
        <img src="" class="blank" alt="xx"/>
        <img src="http://placehold.it/200x200" />
</div>

<style type="text/css">
    .itm{border:2px solid #ccc;width:400px;height:400px;text-align:center;}
    .blank{width:0;height:100%;}
    .itm img{vertical-align:middle;}
</style>

translate(-50%,-50%)，因为translate是相对于自身的宽高

<div id="ex3_container">
　　<div id="ex3_content">Hello World</div>
</div>

#ex3_container { 
　　width:200px; height:200px; 
　　background-color:yellow; 
　　position:relative; 
  }
  #ex3_content { 
　　left:50%; 
　　top:50%; 
　　transform:translate(-50%,-50%); 
　　-webkit-transform:translate(-50%,-50%); 
　　background-color:gray; 
　　color:white; 
　　position:absolute; 
  }

绝对定位 （不兼容IE6，7）

父容器元素：position: relative

注意：高度必须定义，建议加 overflow: auto，防止内容溢出。

<div class="outer">
    <div class="iner"></div>
</div>

.outer{
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid red;
    }
    .iner{
        width: 50%;
        height: 50%;
        overflow: auto;
        background-color: gray;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
}

视口居中  不兼容IE6

内容元素：position: fixed，z-index: 999，记住父容器元素 position: relative

.Absolute-Center {
  width:50%;
  height:50%;
  overflow:auto;
  margin:auto;
  position:fixed;
  top:0;left:0;bottom:0;right:0;
  z-index:999;
}

负 margin

.is-Negative {
        width:300px;
        height:200px;
        padding:20px;
        position:absolute;
        top:50%;left:50%;
        margin-left:-170px;/* (width + padding)/2 */
        margin-top:-120px;/* (height + padding)/2 */
}

FlexBox   CSS3  

.Container{
  display: -webkit-box;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
}

关于 CSS box-flex属性学习可以参考张鑫旭同学的博文：http://www.zhangxinxu.com/wordpress/?p=1338