首页 > 代码库 > 如何居中一个元素

如何居中一个元素

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

        行内:父元素设置 水平居中: 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: auto; /*水平居中*/  
  7.          left: 0; /*此处不能省略,且为0*/  
  8.          right: 0; /*此处不能省略,且为0*/  
  9. }  

 

 

如何居中一个元素