CSS水平居中，浮动水平居中，绝对定位水平居中

1.level0–行内元素水平居中

body{
 text-align:center;
}

思路：body或父容器设置text-align:center;即可。

2.level1–水平居中

以下都是对块状元素而言。

 <style>
    .basic{
        width:200px;
        height:200px;
        background-color:red;
    }
    .center{
        margin:0 auto;
    }
 </style>
 <div class="center basic"></div>

思路：设置margin:0 auto;左右自适应。

3.level2–绝对定位水平居中

 <style>
    .basic{
        width:200px;
        height:200px;
        background-color:red;
    }
    .center{
        position:absolute;
        left:50%;
        margin-left:-100px;
    }
 </style>
 <div class="center basic"></div>

思路：left:50%;margin-left:-100px;设置距左50%，再设置margin-left为负的半个宽度。

4.level3–浮动水平居中

 <style>
    .wrap{
        position:relative;
        left:50%;
    }
    .fl{float:left;}
    .clearfix:after{
       content:"";
       height:0;
       display:block;
       visibility:hidden;
       clear:both;
    }
    .clearfix{zoom:0;}
    .basic{
        width:200px;
        height:200px;
        background-color:red;
    }
    .center{
        position:relative;
        right:50%;
    }
 </style>
<div class="wrap fl clearfix">
    <div class="fl basic center">
</div>

思路：父容器和子容器都相对布局，都浮动。父容器left:50%；子容器right:50%;

5.absolute&relative

absolute相对于上一个已经定位了的祖先元素（relative或absolute或fixed）定义left,top,right,bottom和margin系的指令。

relative相对于父元素定义left,top,right,bottom和margin系的指令，不论父元素是什么定位。