DIV居中的幾種方法


1.

1 body{  
2 text-align:center;  
3 } 

缺點:body內所有內容一並居中

 

2.

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

缺點:需要設置position屬性,網頁復雜時容易擾亂頁面布局,而且只是元素的起始位置居中

 

3.

1 .center{
2 width:500px;
3 margin: 0 auto;
4 }

缺點:需要設置div寬度

4.

1 .center {  
2   display: -webkit-flex;  
3   -webkit-justify-content: center;  
4   -webkit-align-items: center;  
5  }  

缺點:需要支持Html5

5.

1     .center {
2         position: absolute;
3         top: 50%;
4         left: 50%;
5         -ms-transform: translate(-50%,-50%);
6         -moz-transform: translate(-50%,-50%);
7         -o-transform: translate(-50%,-50%);
8         transform: translate(-50%,-50%); 
9     }

缺點:需要支持Html5

6.

1     margin: auto;
2     position: absolute;
3     left: 0;
4     right: 0;

 7.parent{

justify-content:center;

align-items:center;

display:_webkit-flex;

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM