在前端開發中，讓圖形居中是非常常見的需求。本文將介紹如何使用 CSS 讓圖形在頁面中居中。 首先，我們需要明確要居中的元素的寬度和高度。比如我們有一個長方形元素，它的寬度是 200px，高度是 100px。 接下來，我們可以使用以下 CSS 樣式讓元素在頁面中水平和垂直居中： ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* 或者設置具體的高度值 */ } .rectangle { width: 200px; height: 100px; background-color: #ccc; } ``` 上面的樣式中，我們給父容器 `.container` 設置了 `display: flex`，讓它的子元素能夠按照我們的要求排列。然后，我們使用 `justify-content: center` 和 `align-items: center` 分別設置了元素的水平和垂直居中。最后，我們給 `.container` 設置了一個高度，使元素在垂直方向上能夠居中。 如果我們要讓這個長方形元素在頁面中水平居中，但是在垂直方向上緊貼著頁面頂部，我們可以這樣寫： ```css .container { display: flex; justify-content: center; height: 100vh; /* 或者設置具體的高度值 */ } .rectangle { width: 200px; height: 100px; background-color: #ccc; position: absolute; top: 0; } ``` 這次我們給元素 `.rectangle` 添加了 `position: absolute` 樣式，并讓它的 `top` 值為 0，這樣元素就可以緊貼著頁面頂部了。同時，由于`.rectangle` 離開了文檔流，我們就需要設置一個相對定位的祖先元素，使得 `.rectangle` 相對于它定位。比如 `body` 元素： ```css body { position: relative; } ``` 總結一下，要讓元素在頁面中水平和垂直居中，我們可以使用 `display: flex` 和 `justify-content: center`，`align-items: center`； 要讓元素在水平方向上居中，但是在垂直方向上緊貼著頁面頂部，我們可以使用 `position: absolute` 和 `top: 0`。 希望這篇文章能夠幫助你在實際開發中解決圖形居中的問題，提高你的 UI 設計能力。