在 Css 中讓一個框居中非常簡單。使用margin
屬性即可實現。可以使用以下代碼:
.box { width: 300px; height: 200px; margin: 0 auto; }
如上所示,設置框的寬度和高度,同時將margin
屬性設置為0 auto
將框居中。auto
關鍵字可以自動計算左和右的邊距,使框在水平方向上居中。
當然,這不是唯一的方法。還可以使用flexbox
或grid
。
使用flexbox
:
.container { display: flex; justify-content: center; /* 水平方向居中 */ align-items: center; /* 垂直方向居中 */ } .box { width: 300px; height: 200px; }
使用grid
:
.container { display: grid; place-items: center; /* 同時水平和垂直方向居中 */ } .box { width: 300px; height: 200px; }
這些方法可以根據不同場景靈活使用。但是,最重要的是要選擇最適合你的情況的方法。