CSS中的文字垂直對(duì)齊問題一直以來都是令人頭疼的問題，本篇文章將介紹如何通過CSS控制文字在垂直方向的位置。

.vertical-align {
display: flex;
align-items: center;
}

以上代碼采用Flex布局方式實(shí)現(xiàn)文字垂直居中對(duì)齊，align-items: center;命令將子元素在垂直方向上置中。

.vertical-align {
line-height: 200px;
height: 200px;
}
.vertical-align p {
display: inline-block;
vertical-align: middle;
}

以上代碼將會(huì)給一段文字設(shè)定一個(gè)高度，同時(shí)總行高也為200px，子元素通過display: inline-block;實(shí)現(xiàn)垂直居中對(duì)齊。

.vertical-align p {
position: relative;
top: 50%;
transform: translateY(-50%);
}

以上代碼通過CSS Transform屬性實(shí)現(xiàn)文字在垂直方向上居中，position: relative;和top: 50%;的設(shè)定將子元素垂直方向上的距離移動(dòng)到了父元素的中間位置，transform: translateY(-50%);則將文字居中對(duì)齊。

.vertical-align {
display: table-cell;
vertical-align: middle;
}

以上代碼采用Table布局方式實(shí)現(xiàn)垂直對(duì)齊，設(shè)置父元素為display: table-cell;，并在其中添加vertical-align: middle;命令即可實(shí)現(xiàn)文字垂直居中對(duì)齊。