居中是網頁設計中非常重要的一個要素，特別是在布局和排版時。因此，在設計網頁時，常常需要將圖片和文字都居中。而 CSS 中提供了一些方法，讓我們能夠輕松地實現這個需求。下面就讓我們來一起看看如何實現圖片和文字都居中的樣式吧。

首先，讓我們來看如何實現圖片居中。我們可以將圖片的父元素設置為相對定位，然后將圖片設置為絕對定位，并設置 top 和 left 屬性的值為 50%，同時使用 transform 屬性進行微調，代碼如下：

.parent {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

接下來，我們來看如何實現文字居中。文字居中的方法有多種，這里介紹其中幾種：使用 text-align 屬性將文字居中，使用 line-height 屬性設置行高，使用 display 和 margin 屬性等。下面是一些實現文字居中的代碼示例：

.text-center {
text-align: center;
}
.line-height {
line-height: 2;
}
.display {
display: flex;
justify-content: center;
align-items: center;
}
.margin {
margin: 0 auto;
}

最后，我們來看如何實現圖片和文字同時居中。我們可以將圖片和文字都放在一個容器中，然后為這個容器設置居中樣式。下面是一些實現同時居中的代碼示例：

.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.container img,
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上就是關于如何使用 CSS 實現同時居中圖片和文字的方法了。我們可以根據具體的需求來選擇合適的方法。無論是圖片居中還是文字居中，都可以在網頁設計中起到不可或缺的作用。