網頁設計中，經常會遇到需要將某些元素居中的情況。本文將討論如何使用CSS樣式達到居中效果。

/* 水平居中 */
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中，可省略 */
}
/* 垂直居中 */
.container {
display: flex;
flex-direction: column; /* 設置為列元素 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中，可省略 */
}
/* 水平垂直居中 */
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

以上三種方式都是使用Flex布局來實現元素的居中。其中，第一種方式是僅水平居中，使用了justify-content屬性。第二種方式是僅垂直居中，使用了justify-content和align-items兩個屬性。第三種方式是水平垂直都居中，使用了justify-content和align-items兩個屬性。

需要注意的是，以上三種方式只對display屬性設置為flex的元素有效。如果需要居中文本、圖片等元素，可以先將元素的display屬性設置為inline-block，然后再使用以上方式進行居中。

.text-center {
display: inline-block;
text-align: center; /* 水平居中 */
line-height: 100px; /* 垂直居中 */
height: 100px; /* 垂直居中 */
}

以上代碼中，我們將元素的display屬性設置為inline-block，然后通過text-align屬性實現水平居中，通過line-height和height屬性實現垂直居中。

在實際開發中，還有一些其他的居中方式，如使用transform來實現居中、使用position:absolute和margin: auto來實現居中等。不同的居中方式有不同的適用場景，可以根據實際情況進行選擇。