在頁面佈局中，元素水平垂直居中的方法有很多，這裡就列舉3個簡單，用的比較多的方法吧。 情況一、已知元素的寬高 1 <style> 2 .center { 3 width: 200px; 4 height: 200px; 5 background-color: #000; 6 /* 1.絕對定位，加m ...
在頁面佈局中，元素水平垂直居中的方法有很多，這裡就列舉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 class="center"></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%); */ }
