CSS中高度不同的元素對齊，經常讓網頁設計者頭疼。在布局過程中，無論是相對定位，絕對定位還是浮動，都經常遇到這個問題。下面介紹兩種針對高度不同元素對齊的方法。 第一種方法：使用display:flex flex布局是一種非常流行的CSS布局方式。使用flex布局可以輕松實現高度不同元素的對齊。在容器中使用display:flex，便可以讓容器中的子元素自動對齊。下面是一個例子。

.container {
display: flex;
align-items: center; /* 垂直方向居中對齊 */
}
.container div {
margin: 10px;
}

在上面的例子中，div元素的高度不同，但是使用了display:flex，它們自動對齊。align-items: center屬性可以讓這些元素在垂直方向上居中對齊。 第二種方法：使用vertical-align屬性 vertical-align屬性可以用于使行內元素垂直對齊。這個屬性通常用在表格單元格中，但是也可以在其他地方使用。在實際應用中，我們可以使用vertical-align屬性來對齊任何高度不同的元素。

.container div {
display: inline-block;
vertical-align: middle; /* 垂直方向居中對齊 */
padding: 10px;
border: 1px solid #000;
}

在上面的例子中，使用display:inline-block將div元素變為行內塊元素，然后使用vertical-align:middle屬性將這些元素垂直方向上居中對齊。 以上兩種方法都可以實現高度不同元素的對齊。具體使用哪種方法，視具體情況而定。需要注意的是，第一種方法需要容器元素支持flex布局。