使用CSS將圖片和字體居中非常簡單，只需要使用相應的屬性和值即可。在本文中，我們將會介紹如何使用CSS將圖片和字體居中。 圖片居中 要使圖片居中，可以將其包裝在一個包含居中樣式的元素中。比如，我們可以創建一個div元素，并將其居中，然后將img標簽放在其中，如下所示：

<div class="center">
<img src="example.png" alt="example" />
</div>

接下來，在CSS中，我們需要為.center類定義以下屬性：display、text-align、以及 margin。這些屬性的值可以根據您需要的樣式進行更改。例如，以下代碼將使圖像在頁面中完美居中：

.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
img {
max-width: 100%;
}

這將使用flex布局將包含圖像的div元素水平和垂直居中，并通過max-width屬性將圖像的寬度設置為其容器的寬度。根據您的需求，您可以使用其他屬性和值來完成此任務，例如使用以下CSS代碼：

.center {
position: relative;
height: 400px;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這將使用絕對定位和transform屬性將圖像水平和垂直居中。 字體居中 要將文本居中，可以使用text-align屬性。將您的文本包裝在一個段落中，并將您希望居中的段落設置為居中，例如：

<p>這里是要居中的文本。</p>

然后，在CSS中，我們可以使用text-align屬性將文本居中，例如：

p {
text-align: center;
}

這將使段落中的文本居中。根據您的需求，您可以將此屬性應用于各種元素，例如標題、列表等。 在本文中，我們介紹了如何使用CSS將圖片和字體居中。使用這些技術，您可以輕松地為您的網站添加令人驚嘆的布局和設計。