如何居中一个元素

标签：com   word   行内元素   add   水平   ica   vertica   isp   value   

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

        行内：父元素设置 水平居中: 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; width:500px ;  

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

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

           绝对：

1. .outerbox{  
2.          position: absolute; /*绝对定位*/  
3.          width: 500px;  
4.          height:300px;  
5.          background: red;  
6.          margin: 0 auto; /*水平居中*/  
7.          left: 0; /*此处不能省略，且为0*/  
8.          right: 0; /*此处不能省略，且为0*/  
9. }  

如何居中一个元素

标签：com   word   行内元素   add   水平   ica   vertica   isp   value   

原文地址：http://www.cnblogs.com/moneyss/p/7007596.html