當我們在設計網頁時，經常需要將某個元素居中顯示，比如文字、圖片、按鈕等。在HTML和CSS中，有許多方法可以實現居中效果，本文將為大家介紹一些常用的方法。

/*水平居中*/
text-align:center;
/*垂直居中*/
display:flex;
justify-content: center;
align-items: center;

水平居中常見于文本、按鈕等元素的設計中。我們可以使用CSS中的text-align屬性來實現水平居中。把需要居中的元素包裹在一個div中，并設置text-align:center即可使用。下面是一個示例：

<div style="text-align:center;">
<h1>這是一段文本</h1>
</div>

上面的代碼將文本居中顯示。text-align屬性還可以用于表格、圖片等元素，都能夠實現水平居中效果。

如果需要實現垂直居中，則需要使用display:flex屬性。flex布局是目前比較流行的布局方式之一，它可以通過設置容器的屬性來使子元素垂直居中。以下是示例代碼：

<div style="display: flex; justify-content: center; align-items: center;">
<img src="example.png" alt="圖片">
</div>

上述代碼將圖片元素垂直、水平居中顯示。其中，display:flex可以開啟flex布局，justify-content:center可以將子元素水平居中，align-items:center可以將子元素垂直居中。

總之，居中是Web設計中比較常見的需求。我們可以通過CSS提供的text-align和flex等屬性來實現水平、垂直居中效果。