在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常會(huì)遇到將圖片和文字居中對(duì)齊的需求。在CSS中，可以使用vertical-align屬性來實(shí)現(xiàn)垂直居中。

/* 父元素 */
.parent {
display: flex;
align-items: center;
justify-content: center;
}
/* 子元素 */
.child {
display: inline-block;
vertical-align: middle;
}

上面的代碼展示了一種使用flexbox的方法來垂直居中子元素。通過設(shè)置父元素的display為flex，再通過align-items和justify-content屬性來使子元素水平垂直居中。

不過，上述方法只適用于父元素為塊級(jí)元素的情況。如果父元素是行內(nèi)元素，可以使用line-height屬性來實(shí)現(xiàn)垂直居中。設(shè)置line-height的值等于父元素的height即可使子元素垂直居中。

/* 父元素 */
.parent {
display: inline-block;
height: 50px;
line-height: 50px;
}
/* 子元素 */
.child {
display: inline-block;
vertical-align: middle;
}

最后，注意當(dāng)父元素的高度小于子元素時(shí)，垂直居中的效果可能不盡如人意。此時(shí)可以考慮使用transform屬性來微調(diào)子元素的位置。例如：

/* 子元素 */
.child {
position: relative;
top: 50%;
transform: translateY(-50%);
}

使用上述方法，既可以垂直居中圖片文字，也可以垂直居中其他元素。