div居中的方式

一、水平居中 

1.

 body{  
   text-align:center;  
 } 

缺点：body内所有内容一并居中

2.

.center{
  position: fixed;
  left: 50%;
}

缺点：需要设置position属性，网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中

3.

 .center{
   width:500px;
   margin: 0 auto;
 }

缺点：需要设置div宽度

4.

 .center {  
   display: -webkit-flex;  
   -webkit-justify-content: center;  
   -webkit-align-items: center;  
  }  

缺点：需要支持Html5

5.

     .center {
         position: absolute;
         top: 50%;
         left: 50%;
         -ms-transform: translate(-50%,-50%);
         -moz-transform: translate(-50%,-50%);
         -o-transform: translate(-50%,-50%);
         transform: translate(-50%,-50%); 
    }

缺点：需要支持Html5

6.

     margin: auto;
     position: absolute;
     left: 0;
     right: 0;

 7.

parent{

   justify-content:center;
  
   align-items:center;

   display:_webkit-flex;

}

本文参考：https://www.cnblogs.com/ones/p/4362531.html

 二、垂直居中

<div class="text">

        <span>垂直居中</span>

</div>

  css：

 1.第一种方式

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

2.第二种方式

.text{
    display: flex;
    justify-content:center;
    align-items:Center;
}

3.第三种方式

.text span{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }

4.  line-height，只限于一行，多行不行

     

div{
  width:100%;
  height:50px;
  background:#f1f1f1;
  line-height:50px;
}