在前端開發中，CSS布局是非常重要的一部分。在實現網站布局時，我們需要學會如何使用CSS實現水平垂直布局。下面將介紹幾種常見的CSS水平垂直布局方法。 1. 使用flex布局 flex布局是CSS3新增的一種布局方式，是非常強大的一種CSS布局方式。通過設置容器的display屬性為flex，就可以開啟flex布局。

.container{
display:flex; /* 開啟flex布局 */
justify-content:center; /* 設置水平居中 */
align-items:center; /* 設置垂直居中 */
}

2. 使用絕對定位 通過設置父元素的position屬性為relative，子元素的position屬性為absolute，再利用top、bottom、left、right等屬性來調整子元素的位置，就可以實現水平垂直居中的效果。

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

3. 使用表格布局 表格布局是比較老舊的一種布局方式，但在某些場景下仍然很有用。將容器的display屬性設置為table，然后將子元素的display屬性設置為table-cell，再利用vertical-align屬性來實現垂直對齊效果。

.container{
display:table;
width:100%;
height:100%;
}
.child{
display:table-cell;
vertical-align:middle;
text-align:center;
}

總之，以上幾種方法都可以實現CSS水平垂直布局效果，選擇哪種布局方式還需要根據需求場景來考慮。希望以上方法能夠對大家學習CSS布局有所幫助。