CSS可以讓我們輕松地將元素水平居中或垂直居中。今天我們來看看如何使用CSS讓一個ul垂直居中。

/* HTML代碼 */
<div class="wrapper">
<ul class="menu">
<li>菜單項一</li>
<li>菜單項二</li>
<li>菜單項三</li>
<li>菜單項四</li>
</ul>
</div>
/* CSS代碼 */
.wrapper {
display: flex; /* 將容器設置為flex布局 */
justify-content: center; /* 水平居中容器內的元素 */
align-items: center; /* 垂直居中容器內的元素 */
height: 500px;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
margin: 10px;
padding: 10px;
background-color: #f2f2f2;
}

首先，我們在容器上應用了flex布局，并設置了高度為500px。接著，我們使用justify-content和align-items屬性來分別實現水平居中和垂直居中。

對于ul和li元素，我們只需要進行一些基本的樣式設置即可。這樣，我們就成功地將ul垂直居中了。