CSS 盒子居中是經常需要用到的一種技巧。下面介紹一些常用的 CSS 代碼可以實現居中效果。

代碼如下：

/* 水平居中 */
.container{
display: flex;
justify-content: center;
align-items: center;
}
/* 垂直居中 */
.container{
position: relative;
}
.content{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 水平垂直居中 */
.container{
position: relative;
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 單行文本水平居中 */
.text{
text-align: center;
}
/* 多行文本水平居中 */
.container{
display: flex;
justify-content: center;
}
.text{
width: 80%;
text-align: center;
}
/* 行內塊元素水平居中 */
.container{
text-align: center;
}
.block{
display: inline-block;
}
/* 塊級元素水平居中 */
.container{
text-align: center;
}
.block{
display: block;
margin: 0 auto;
}

以上代碼給出了多種居中效果的實現方法，可以根據需要選擇不同的方法實現。