在Web開發中，使文本和其他內容居中對齊是一種常見的需求。使用CSS，我們可以輕松地將文本居中對齊并使其在其容器中垂直居中。

在這里，我們將展示如何利用CSS將文本居中對齊并使其在其容器中垂直居中。

.container {
display: flex;  /*將容器設置為Flex布局*/
justify-content: center;  /*水平居中*/
align-items: center;  /*垂直居中*/
height: 200px;  /*設置容器的高度*/
border: 1px solid black;  /*設置容器的邊框*/
}
.text {
font-size: 24px;  /*設置字體大小*/
text-align: center;  /*文本水平居中*/
}

在上面的代碼中，我們首先創建一個名為“container”的容器，并將其設置為Flex布局。我們使用“justify-content”屬性將其水平對齊，并使用“align-items”屬性將其垂直對齊。

我們還為容器設置了一個高度和邊框以使其可見。

最后，我們創建一個名為“text”的元素，其將是容器中要居中對齊的文本。我們使用“font-size”屬性設置文本的大小，并使用“text-align”屬性使其水平居中。

因此，“text”元素將垂直居中和水平居中，位于其父容器中心。

通過使用上面的CSS，您可以使任何元素在其容器中垂直和水平居中。