在網頁布局中，自動對齊是一個很常見的需求。這時候，CSS的自動對齊功能就派上用場了。本文將介紹如何設置CSS的自動對齊。 首先，我們需要使用CSS的flex布局。Flex布局是一種彈性布局模型，能夠自動對齊元素。我們可以將布局模型設置為flex，并調整justify-content屬性，來實現自動對齊。如下代碼：

.container {
display: flex;
justify-content: center; //水平居中對齊
}

這個例子中，我們將容器的布局模型設置為flex，然后通過justify-content屬性將元素水平居中對齊。其他可選的屬性值包括：flex-start（默認值，左對齊），flex-end（右對齊）和space-between（兩端對齊）。 如果需要實現垂直居中對齊，則可以使用align-items屬性。如下代碼：

.container {
display: flex;
align-items: center; //垂直居中對齊
}

這個例子中，我們將容器的布局模型設置為flex，然后通過align-items屬性將元素垂直居中對齊。其他可選的屬性值包括：flex-start（默認值，頂部對齊），flex-end（底部對齊）和stretch（拉伸對齊）。 最后，我們還可以同時使用justify-content和align-items屬性，來實現元素的水平和垂直居中對齊。如下代碼：

.container {
display: flex;
justify-content: center;
align-items: center; //水平和垂直居中對齊
}

本文介紹了如何使用CSS的flex布局來實現自動對齊功能。通過設置justify-content和align-items屬性，我們可以輕松地實現元素的水平、垂直居中對齊等效果。希望這些技巧可以幫助你更好地布局你的頁面。