CSS實現多行文本垂直居中

最近在作項目時,遇到了以下樣式需求:
clipboard.pngdom

即實現多行文本垂直居中。spa

分析:文本垂直居中分爲兩種,即單行文本和多行文本。code

  1. 單行文本垂直居中blog

    方法簡單:line-height(=父元素高度便可)
  2. 多行文本垂直居中ip

  • 父元素高度不固定it

    使用padding樣式解決(即便上下padding相等)
  • 父元素高度固定,假設dom結構以下所示

clipboard.png

解決方法:class

clipboard.png

相關文章
相關標籤/搜索