垂直對其是CSS中一項很重要的技能，它可以讓我們的網頁看起來更整潔、優美。垂直對其的原理就是讓容器中的子元素在垂直方向上居中或對齊。 對于一個容器元素，我們可以使用CSS屬性display: flex;來創建一個彈性盒子。在這個彈性盒子中，我們可以使用justify-content屬性來控制子元素在主軸上的對齊方式，而使用align-items屬性來控制子元素在交叉軸上的對齊方式。 如果我們想讓子元素在垂直方向上居中，可以使用align-items: center;來實現。如果我們想讓子元素垂直頂部對齊，可以使用align-items: flex-start;來實現。如果我們想讓子元素垂直底部對齊，可以使用align-items: flex-end;來實現。 以下是一個簡單的例子：

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
border: 1px solid black;
}
.container p {
font-size: 20px;
}

在這個例子中，我們創建了一個彈性盒子，使容器內的子元素在垂直方向上居中。我們還設置了一個高度，所以盒子的高度為100px。我們在子元素中設置了字體大小為20px。 如果我們想讓子元素垂直頂部對齊，可以將align-items的屬性值改為flex-start，代碼如下：

.container {
display: flex;
justify-content: center;
align-items: flex-start;
height: 100px;
border: 1px solid black;
}
.container p {
font-size: 20px;
}

在這個例子中，我們將align-items的屬性值改為flex-start，使子元素垂直頂部對齊。我們還是使用了相同的高度和字體大小。 最后，如果我們想讓子元素垂直底部對齊，可以將align-items的屬性值改為flex-end，代碼如下：

.container {
display: flex;
justify-content: center;
align-items: flex-end;
height: 100px;
border: 1px solid black;
}
.container p {
font-size: 20px;
}

在這個例子中，我們將align-items的屬性值改為flex-end，使子元素垂直底部對齊。我們還是使用了相同的高度和字體大小。 在實際開發中，我們需要根據不同的情況使用垂直對其技巧，讓網頁看起來更加美觀。