css 利用transform 實現頁面居中效果


1.代碼

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             
12             div{
13                 /* width: 100px;
14                 height: 100px; */
15                 background-color: #bfa;
16                 position: absolute;
17                 left: 50%;
18                 top: 50%;
19                 transform: translateX(-50%) translateY(-50%);
20             }
21         </style>
22     </head>
23     <body>
24         <div>dgjhio</div>
25     </body>
26 </html>

2.圖片

 

 

 

 

講解

1.不論對設置了寬高和沒有設置寬高的快元素,而且已經開啟了定位,相對包含塊元素定位,設置left: 50%;top:50%; 然后利用translateX(-50%) translateY(-50%); 移動自身的寬高各50%,

則該元素位於網頁正中央。


免責聲明!

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



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