CSS 中實(shí)現(xiàn)圖像和文字的垂直居中對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)是至關(guān)重要的。下面我們將介紹一些方法來(lái)實(shí)現(xiàn)這一目標(biāo)。

// 使用 flexbox
.container {
display: flex;
align-items: center;
justify-content: center;
}
// 使用 position
.container {
position: relative;
}
.container img,
.container p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
// 使用 table
.container {
display: table;
}
.container img,
.container p {
display: table-cell;
vertical-align: middle;
}

以上三種方法都可以實(shí)現(xiàn)圖像和文字的垂直居中。使用 flexbox 是最簡(jiǎn)單的，但不兼容所有瀏覽器，需要瀏覽器的支持。使用 position 和 table 可以實(shí)現(xiàn)更好的兼容性，但代碼稍微復(fù)雜一些。