未知高度和寬度元素的水平垂直居中 （不外傳秘法）

在說到這個問題的時候，我們都知道，table預設文字就是垂直居中顯示的，也許有人會問Div中CSS中不是有text-align屬性來設定垂直居中的嗎？是的，通常我們使文字垂直居中用的就是這個屬性，但是在正式開發時候單單掌握這個可不夠，例如：現在有一需求，在div中（未知寬高），裡面內容不固定，不管是文字佔1行還是多行都在div中垂直居中，那麼應該怎麼做？

當要被居中的元素是inline（例如span）或者inline-block（例如div/p）的時候，可以巧妙的將父級容器設定為display：table-cell，配合text-align：center和vertical-align：middle即可以實現水平垂直居中。

<！DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1。0 Transitional//EN”“

http：//www。

w3。org/TR/xhtml1/DTD/xh

tml1-transitional。dtd

”>

http：//www。

w3。org/199

http：//www。

weipxiu。com/wp-content/

uploads/2017/05/G5UC9DYR54DWIX7RLE。png

“ alt=” “ width=”1052 “ height=”198 “ class=”alignnone size-full wp-image-679 “ />

工作需求示例展示：