CSS讓盒子模型居中是很常用的技巧，無論是HTML網頁還是響應式設計，我們都可以運用居中的方式來讓網頁更美觀、優雅。下面是一些讓盒子模型水平或垂直居中的CSS技巧。

//水平居中
.container {
display: flex;  //彈性布局
justify-content: center;  //水平居中
}
//垂直居中
.container {
display: flex;  //彈性布局
align-items: center;  //垂直居中
}
//水平垂直居中
.container {
position: relative;  //相對定位
}
.box {
position: absolute;  //絕對定位
top: 50%;
left: 50%;
transform: translate(-50%,-50%);  //移動距離為本身寬高的一半
}

使用flex布局可以快捷地實現水平或垂直居中，其中justify-content屬性用于水平居中，align-items屬性用于垂直居中。如果想讓盒子模型水平垂直居中，可以運用相對定位和絕對定位結合的方式來實現，通過調整top和left的值及使用transform移動距離，達到將盒子模型移到父容器的中央。