CSS居中盒子是Web設計中非常常見的操作。以下是三種不同的方法來讓元素水平和垂直居中。

1. 使用text-align和vertical-align屬性來居中

.box {
width: 200px;
height: 100px;
background: #aaa;
text-align: center;
vertical-align: middle;
line-height: 100px; /*必須等于高度*/
}

這種方法是通過給父元素設置text-align和vertical-align屬性，再通過設置line-height屬性使得子元素在水平和垂直方向上都居中。

2. 使用flexbox布局來居中

.container {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.box {
width: 200px;
height: 100px;
background: #aaa;
}

使用flexbox布局可以更方便地實現盒子的水平和垂直居中。只需要在父元素上設置display: flex，然后在容器上使用justify-content和align-items屬性來分別實現水平和垂直居中。

3. 使用絕對定位來居中

.box {
width: 200px;
height: 100px;
background: #aaa;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

最后一種方法是使用絕對定位來實現盒子的居中。將盒子設置為絕對定位，并將top和left屬性都設置為50%。然后使用transform屬性來將盒子在水平和垂直方向上分別向左和向上移動自身寬度和高度的一半。