CSS盒子在盒子里居中是一個經常遇到的布局問題。下面將介紹幾種常用的解決方法。 第一種方法是使用flexbox。 在外部容器中使用display:flex;和justify-content: center; align-items: center;讓子元素水平垂直居中。

.container {
display: flex;
justify-content: center;
align-items: center;
}

第二種方法是使用相對和絕對定位。 父元素設置position: relative;，子元素設置position:absolute;和top:50％;left:50％;同時配合transform將元素上移和左移50％的寬度和高度。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

第三種方法是使用table。 將父元素設置為display: table;和text-align:center;，子元素設置為display: table-cell;和vertical-align:middle;元素變成表格單元格，表格單元格自然就居中了。

.parent {
display: table;
text-align: center;
}
.child {
display: table-cell;
vertical-align: middle;
}

以上是三種常用的方法，我們可以根據實際需求選擇最適合的方法。