元素垂直居中和水平居中的方法.md

元素垂直居中和水平居中的方法

水平居中：

1. 给元素一个宽度然后使用margin

   body{
       width:900px;
       margin:0 auto;
   }
   

2. 定位实现

   body{
       position:absolute;
       left:50%;
   }
   

3. 浮动

   body{
       float:left;
       right:50%;
   }
   

4. 几个元素同时居中在一条线上

   body{
       vertical-align:middle;
   }
   

5. 利用table

   ul{
       display:table;
   }
   ul li{
       display:table-cell;
   }
   

6. 使用inline-block实现，在父元素上设置text-align

body{
    text-align:center;
}
.content{
    display:inline-block;
}

垂直居中

1. 设置line-height=height

2. 使用定位

3. 浮动

4. vertical-align

   .content{
       display:table-cell;
       vertical-align:middle;
   }