CSS 是前端開發中必不可少的一項技術。當我們在構建網站時，經常需要對元素進行布局和樣式設置。而想要讓網站看起來更美觀，就需要將元素稍微調整一下。其中一項常見的操作就是將元素居中。

下面介紹幾種常見的居中方式。

/* 水平居中 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 垂直居中 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 水平垂直居中 */
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上三種方式都比較常見，可以根據不同的需求選擇適合的方式。其中第一種方式使用了 Flex 布局，通過設置 justify-content 和 align-items 為 center，可以實現水平和垂直居中。第二種方式在第一種方式的基礎上，通過設置容器的高度為 100vh，可以實現垂直居中。第三種方式則是利用絕對定位和 transform 實現水平垂直居中。

CSS 居中的操作不僅可以讓網站看起來更美觀，還可以增加用戶體驗。特別是在移動端瀏覽時，更需要注意元素的居中設置，以免讓用戶閱讀或操作不便。