CSS制作上下左右劇中的效果非常重要，因為這將有助于您更好地控制頁面上各元素的位置和布局，使其更加美觀和易讀。接下來，就讓我們一起來看一下4種上下左右居中的實現方式吧。

/*方法一：使用display:flex*/
.container {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
/*方法二：使用position*/
.container {
position: relative; /*相對定位*/
}
.child {
position: absolute; /*絕對定位*/
left: 50%; /*居中*/
top: 50%; /*居中*/
transform: translate(-50%, -50%);
}
/*方法三：使用margin*/
.container {
text-align: center; /*水平居中*/
}
.child {
display: inline-block; /*讓元素成為塊級元素*/
margin: 0 auto; /*水平居中*/
vertical-align: middle; /*垂直居中*/
}
/*方法四：使用table*/
.container {
display: table; /*將元素變成表格*/
margin: 0 auto; /*水平居中*/
}
.child {
display: table-cell; /*將元素變成表格單元格*/
vertical-align: middle; /*垂直居中*/
}

希望本文能夠幫助您更好的進行CSS布局設計。如果您覺得這篇文章有幫助，就請您分享給更多的人吧！