在網頁設計中，一個頁面的布局很重要。有時候，我們需要將某些元素放在頁面的底部并且垂直居中。這時，CSS提供了一種簡單的解決方案。 我們可以使用CSS的flex布局來使元素底部居中。具體方法是將父元素設為flex布局，并使用align-items屬性將子元素垂直居中。同時，在父元素設置height:100vh保證父元素占據整個視窗高度，子元素最終將底部居中。 下面是代碼示例：

在上面的代碼中，我們使用了一個.container容器來包含內容，并且將它設為flex布局。同時，我們指定了height:100vh，讓它占據整個視窗高度。我們還使用了justify-content:center和align-items:center使.container的子元素垂直居中。 最后，我們使用.flex-shrink:0讓底部的子元素不會被壓縮。這樣保證了子元素始終垂直居中。

// 內容
// 底部內容

通過上面的代碼，我們可以輕松地實現在底部垂直居中的效果。使用flex布局可以有很多靈活的方式來構建頁面布局，我們在開發中可以深入了解并使用該屬性。