CSS中使文本圖片居中的方法

在CSS中，我們可以使用多種方法使文本圖片居中，以下是一種簡(jiǎn)單的方法：

1、使用flex布局：將文本和圖片放入一個(gè)flex容器中，并利用flex的justify-content和align-items屬性來實(shí)現(xiàn)水平和垂直居中。

HTML結(jié)構(gòu)如下：

<div class="container">
    <div class="text">文本內(nèi)容</div>
    <img src="圖片路徑" alt="圖片描述">
</div>

CSS樣式如下：

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 根據(jù)需要調(diào)整容器高度 */
}

2、使用position定位：通過position屬性將文本和圖片定位到容器的中心位置。

HTML結(jié)構(gòu)同上。

CSS樣式如下：

.container {
    position: relative;
    height: 100vh; /* 根據(jù)需要調(diào)整容器高度 */
}
.text, .img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3、使用grid布局：將文本和圖片放入一個(gè)grid容器中，并利用grid的justify-content和align-items屬性來實(shí)現(xiàn)水平和垂直居中。

HTML結(jié)構(gòu)如下：

<div class="container">
    <div class="text">文本內(nèi)容</div>
    <img src="圖片路徑" alt="圖片描述">
</div>

CSS樣式如下：

.container {
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 根據(jù)需要調(diào)整容器高度 */
}

三種方法都可以使文本圖片在CSS中居中顯示，你可以根據(jù)自己的需求和喜好選擇適合的方法。