web前端技巧-文字如何垂直居中？多行文字如何實現上下居中？

      做前端開發的同學肯定對文字居中不陌生，但一般我們說的都是水平居中也就是左右居中，那麼你想過沒有如何實現垂直居中也就是上下居中嗎？今天小千就來給大家介紹一下。

      單行文字垂直居中---行高等於高度值

      上面的方法只適用於單行文字，多行文字使用就會出現問題，那麼如何實現多行文字垂直居中呢？

      多行文字垂直居中

      1、模擬表格

      將父元素div 模擬成表格table,子元素span模擬成表格單元格；讓子元素設定vertical-align:middle來實現。

      2、模擬表格單元格

      3、將子元素設定為行內塊元素，模擬成單行文字

      將子元素設定為行內塊元素，並且設定vertical-align:middle來實現，需要注意的是，子元素span會繼承父元素div的行高，所以我們需要重設一個適宜的行高。

      缺點：span文字的高度不能超過父元素div的高度。

      4、利用定位的方式來解決

      父元素設定相對定位，子元素設定絕對定位，並且設定top：50%；margin-top:負子元素高度的一半；如果不考慮相容問題，我們也可以利用CSS3中 transform:translateY(-50%)來代替margin-top:負子元素高度的一半。

      5、使用flex佈局

      我們可以使用彈性盒佈局來實現這個效果。

      

      以上就是web前端實現文字垂直居中和多行文字垂直居中的介紹了。最後歡迎大家關注我，後期分享更多Web前端知識。

      本文來自千鋒教育，轉載請註明出處。