如何居中一个元素

水平居中:行内元素、块级元素、浮动、绝对定位

        行内：父元素设置 水平居中: text-align:center 垂直居中：line-height：height值

        块级： 水平居中:margin: 0 auto 

                  垂直居中：

                确定高：除父元素line-height外，当前元素：

vertical-align:middle;// 垂直居中对齐

 display:inline|inline-block 块级元素转行级元素

             不确定高：

 父元素的padding-top和padding-bottom一样 

         浮动：不确定宽和确定宽

                不确定宽：父元素的left:50%;和自身的right:50%;position:relative;

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

        .outerbox{  float:left; position:relative;  left:50%; }   

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

                确定宽： 不确定宽的方法或算出值

          .outerbox{  background-color:pink; 500px ;  

                       margin: -150px 0 0 -250px; /*使用marin向左移动250px，保证元素居中*/  

                        position:relative;   left:50%;   top:50%;  }  

           绝对：

.outerbox{
         position: absolute; /*绝对定位*/
          500px;
         height:300px;
         background: red;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0; /*此处不能省略，且为0*/
}