HTML 和 CSS 的居中是 Web 開發中最基本的操作之一。對于需要呈現出更好的視覺效果的網站，必須了解如何居中元素。 居中元素的方法有很多種，包括使用表格、使用 flexbox、使用 grid 等。在這里我們介紹兩種使用 CSS 的居中方法。 方法一：使用 margin 屬性 使用 margin 屬性是最簡單的居中元素方法。使用這種方法，需要將元素的寬度和高度給定，并將其 margin 屬性設置為 auto。這種方法適用于絕對定位或相對定位的元素。 例如，我們要讓一個 id 為 box 的 div 元素居中，代碼如下：

#box {
width: 200px;
height: 200px;
position: relative;
margin: auto;
background-color: blue;
}

注意，這種方法對于不能自動計算寬度和高度的元素，如圖片和視頻等，不適用。 方法二：使用 flexbox 使用 flexbox 是一種相對簡單的居中元素方法，也是相對先進的方法。這種方法大概在 CSS3 中流行開來。通過將容器元素的 display 屬性設置為 flex，可以使用 flexbox 方法。 例如，我們要讓一個 id 為 container 的 div 中的 span 元素居中，代碼如下：

#container {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
background-color: red;
}
#container span {
background-color: blue;
padding: 10px;
}

這種方法的優勢在于，能夠同時垂直和水平地居中元素，且可以在容器元素中添加多個元素，使它們同時居中。 以上是兩種使用 CSS 的居中方法。根據網站的實際需求，你可以選擇不同的方法來實現元素的居中效果。