CSS 中的內容垂直居下是一種常見的需求，在 Web 開發過程中，我們經常需要在頁面中將某個元素的內容垂直居下，以達到更好的視覺效果。

#wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
#content {
margin-top: auto;
margin-bottom: auto;
}

實現這樣的效果有很多種方法，這里我們介紹一種常用的方法，使用 flex 布局來實現內容的垂直居下。

#wrapper {
display: flex; /* 使用 flex 布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 500px; /* 設置高度 */
}
#content {
margin-top: auto; /* 將頂部的 margin 設置為 auto，實現垂直居下 */
margin-bottom: auto; /* 將底部的 margin 設置為 auto，實現垂直居下 */
}

在上面的代碼中，我們將父元素 #wrapper 設置為 flex 布局，并使用 align-items 和 justify-content 屬性分別將內容垂直居中和水平居中。

然后，我們使用 margin-top 和 margin-bottom 屬性將 #content 元素的頂部和底部 margin 同時設置為 auto，這樣就可以實現內容的垂直居下。

需要注意的是，這種方法只適用于父元素的高度已知的情況下，如果父元素高度不確定，還需要做一些其他的處理。