關於css實現多行文字垂直居中的幾種方法

2021-09-07 20:46:11 字數 1619 閱讀 7952

在我們寫前端頁面的過程中，經常會用到居中。居中又分為了水平居中和垂直居中，水平居中時，我們直接設定元素margin：0 auto;，而對於一行文字垂直居中也很常見，設定文字line-height屬性值為父元素的高度即可相對于父元素垂直居中。但當我們遇到多行文字垂直居中而父元素的高度又不確定時，就會出現一些問題，下面寫出自己平時會用的一些方法：

1.display:table;

對於display：table;和displpay:table-cell;平時我也不是太了解，但它倆在一起可以解決居中的問題。

上**：

html部分：

紅酥手，黃縢酒，滿城春色宮牆柳。


東風惡，歡情薄。一懷愁緒，幾年離索。錯、錯、錯。
css部分：
.box1


.box1 span
實現的效果：

2.line-height與vertical-align

將要居中的子元素看做一塊，利用line-height和vertical-align進行設定。

html部分：

春如舊，人空瘦，淚痕紅浥鮫綃透。


桃花落，閒池閣。山盟雖在，錦書難託。莫、莫、莫！
css部分：
.box1


.box1 span
這裡box1的ling-height要與盒子的高相同，是為了後面子元素而設定基線。而子元素設定display:inline-block;是為了自己設定合適的line-height。

實現的效果：

對子元素進行相對定位，再讓其做平移變換。

html部分：

世情薄，人情惡，雨送黃昏花易落。


曉風乾，淚痕殘，欲箋心事，獨語斜闌。難，難，難！
css部分：
.box1


.box1 span
實現的效果：

利用彈性布局，直接設定align-item屬性，對子元素進行垂直居中。

html部分：

人成各，今非昨，病魂常似鞦韆索。


角聲寒，夜闌珊，怕人尋問，咽淚裝歡。瞞，瞞，瞞！
css部分：
.box1
實現的效果：

CSS多行文字垂直居中

今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...

CSS多行文字垂直居中

今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...

css布局 多行文字垂直居中

場景 父元素 高度固定，如何使其中的文字垂直居中？方法一 測試文字測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 結果截圖 關鍵樣式 父元素 這裡是div 設定和高度一致的 line height 這裡是200px 由後面的vertical align定義看，這是為了設定div...