在網頁設計中，我們經常會遇到需要實現上下兩端對齊的需求。比如說，我們需要在一個區域內放置兩張大小不一的圖片，又想讓它們在水平居中的同時，上下對齊，這時候該怎么做呢？

在CSS中，我們可以使用flexbox布局來實現上下兩端對齊。在容器中設置屬性display:flex;align-items:center;justify-content:center;就可以實現居中對齊了。但是，要實現上下兩端對齊，我們需要稍作改變。

.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 200px;
}
.img {
display: block;
max-width: 100%;
height: auto;
}

首先，我們需要將容器的flex-direction屬性設置為column，這樣容器內部的元素就會垂直排列。然后，將容器的justify-content屬性設置為space-between，這樣容器內部的元素將分別放置在頂部和底部，中間則會有一定的間隔。最后，將容器的align-items屬性設置為center，以保證內部元素水平居中。

注意，在實現上下兩端對齊時，我們需要額外設置容器的高度，以便讓容器內部的元素能夠頂部和底部對齊。

最后，我們需要將內部的元素設置為display:block，這樣才能讓元素在容器內占據一行，高度才能自適應。我們還設置了元素的max-width為100%，保證元素能夠自適應容器的大小。

總結一下，要實現上下兩端對齊的效果，需要在容器上設置flex-direction、justify-content、align-items和高度。而內部元素則需要設置display和max-width。