在頁面布局中，元素水平垂直居中的方法有很多，這里就列舉3個簡單，用的比較多的方法吧，
情況一、已知元素的寬高
1 <style> 2 .center { 3 width: 200px; 4 height: 200px; 5 background-color: #000; 6 /* 1.絕對定位，加margin */ 7 position: absolute; 8 left: 50%; 9 top: 50%; 10 margin-top: -100px; 11 margin-left: -100px;
12 } 13 </style> 14 </head> 15 <body> 16 <div ></div> 17 </body>
情況二、未知元素的寬高
body { /* 3.flex */ width: 600px; height: 600px; display: flex; /* 主軸居中 */ justify-content: center; /* 側軸劇中 */ align-items: center } .center { width: 200px; height: 200px; background-color: #000; /* 2.絕對定位+transform: ; */ /* position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); */ }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546736.html
標籤：Html/Css
上一篇：web安全｜滲透測驗｜網路安全
下一篇：前端設計模式——職責鏈模式