CSS中的盒子模型包括內容、內邊距、邊框和外邊距。當我們想要讓盒子里的內容居中時,可以使用以下方法:
/* 水平居中 */ .box{ text-align: center; /* 將盒子中的文本水平居中 */ } /* 垂直居中(僅適用于單行文本)*/ .box{ line-height: 200px; /* 將行高設置為盒子高度,使文本垂直居中 */ } /* 垂直居中(通用)*/ .box{ display: flex; /* 將盒子設為彈性容器 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ }
以上方法均可以使盒子內的文本、圖片、其他元素等居中。使用這些方法可以為網頁布局提供更多的選擇,幫助我們更好地掌控頁面的風格與美觀度。