在網頁設計中，水平居中和垂直居中是非常重要的布局方式。對于使用CSS的設計師來說，這也是一件輕松的事情。在CSS中，我們可以使用 display 屬性和 margin 屬性來實現元素的居中設置。

在CSS中實現水平居中的方法有很多，但其中最簡單的方式是使用 display: flex 屬性。這個屬性可以使元素內部的所有元素都相對于一個主軸居中而言非常方便。在我們的代碼中，我們可以采用以下方式來實現水平居中：

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

在上面的代碼中，display: flex 屬性告訴瀏覽器，我們希望使用 flex 屬性來布局這個容器。同時，justify-content: center 屬性則告訴瀏覽器，我們希望將容器內部的所有子元素都相對于容器的中心進行水平居中。

另外，如果希望實現垂直居中，我們可以使用 display: flex 和 align-items: center 屬性來實現。在我們的代碼中，我們可以采用以下方式來實現垂直居中：

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

在上面的代碼中，display: flex 屬性告訴瀏覽器，我們希望使用 flex 屬性來布局這個容器。同時，align-items: center 屬性告訴瀏覽器，我們希望將容器內部的所有子元素都相對于容器的中心進行垂直居中。

總之，水平居中和垂直居中這些常見的布局方式，使用CSS在實際開發過程中需要經常用到。以上的方法不僅簡單易懂，而且兼容大多數瀏覽器。所以，對于初學者和中級開發者而言，掌握CSS中的居中設置是非常實用的技能。