CSS布局中，水平和垂直居中是常見的樣式需求，尤其在響應式設計和移動端布局中非常重要。下面我們來看幾種實現水平和垂直居中的方法。

1.使用display:flex實現居中

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

2.使用position和transform實現居中

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

3.使用table和table-cell實現居中

.container{
display: table;
height: 200px;
width: 200px;
}
.content{
display: table-cell;
vertical-align: middle;
text-align: center;
}

4.使用grid布局實現居中

.container{
display:grid;
place-items:center;
}

以上幾種方法均能實現居中效果，但因項目需求不同，實際開發時需要選擇適合的方法。希望以上內容對大家有幫助。