元素居中

（一）元素水平居中的方式

1）行级元素水平居中对齐（父元素设置 text-align:center）

<div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">  
    <span>行级元素垂直居中</span>   
</div> 

2. 块级元素水平居中对齐（margin: 0 auto）

   块级元素水平居中

3）浮动元素水平居中

宽度不固定的浮动元素

html代码

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

CSS样式

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

宽度固定的互动元素

html代码

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

css代码

     .outerbox{
         background-color:pink; /*方便看效果 */  
         width:500px ; 
         height:300px; /*高度可以不设*/
         margin: -150px 0 0 -250px; /*使用marin向左移动250px，保证元素居中*/
         position:relative;   /*相对定位*/
         left:50%;
         top:50%;
     }

4）让绝对定位的元素水平居中对齐

  这种方式非常独特，大家一定要记牢这种方式，会用这种方式的薪资待遇必然高出几千¥

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


经验分享：水平居中的主要属性有

1. text-alin:center;

2. margin:0 auto

3. position:relative|absolute; left:50%;

（二）元素垂直居中对齐

1）对行级元素垂直居中（heiht与line-height的值一样）

 height:300px;
 line-height:300px;

2）对块级元素垂直居中对齐

2.1 父元素高度固定的情况

    1）父元素的height与line-height值相同

    2）需要垂直居中的元素

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

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

    HTML代码

        <div class="center">
            <div class="inner"></div>
        </div>

    CSS代码

             .center{
                 width: 500px;
                 height:300px;
                 line-height: 300px;
                 border:1px solid;
             }
              .inner{
                  background: blue;
                  width: 300px;
                  height: 100px;
                  display: inline-block;
                  vertical-align: middle;
              }

原文：https://blog.csdn.net/lxcao/article/details/52670724
版权声明：本文为博主原创文章，转载请附上博文链接！