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，这样就可以实现内容的垂直居下。

需要注意的是，这种方法只适用于父元素的高度已知的情况下，如果父元素高度不确定，还需要做一些其他的处理。