在網頁設計中，經常需要將元素居中顯示。CSS提供了多種方式來實現元素居中。下面介紹幾種常用的居中方法。

水平居中

將元素在水平方向居中顯示，有以下兩種方式：

/* 方法一：使用 margin:auto */
.element {
width: 200px;
margin: 0 auto;
}
/* 方法二：使用 flexbox */
.container {
display: flex;
justify-content: center;
}
.element {
width: 200px;
}

垂直居中

將元素在垂直方向居中顯示，有以下兩種方式：

/* 方法一：使用 table-cell */
.container {
display: table-cell;
vertical-align: middle;
}
.element {
width: 200px;
height: 200px;
}
/* 方法二：使用 flexbox */
.container {
display: flex;
align-items: center;
}
.element {
height: 200px;
}

水平垂直居中

將元素在水平和垂直方向居中顯示，有以下兩種方式：

/* 方法一：使用 position 和 transform */
.container {
position: relative;
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
/* 方法二：使用 flexbox */
.container {
display: flex;
justify-content: center;
align-items: center;
}
.element {
width: 200px;
height: 200px;
}

以上是常用的幾種居中方法，根據實際需求選擇合適的方法來實現元素的居中，將會使網頁設計更加美觀和舒適。