通過之前總結水平居中與垂直居中的基本方法，梳理垂直水平同時居中的方法就沒有那麼亂了。 text-align：center + line-height 如下圖，div2中用text-align+line-height實現單行文本水平垂直居中。 通過之前總結水平居中與垂直居中的基本方法，梳理垂直水平同時 ...
通過之前總結水平居中與垂直居中的基本方法，梳理垂直水平同時居中的方法就沒有那麼亂了。
- text-align：center + line-height
如下圖，div2中用text-align+line-height實現單行文本水平垂直居中。
也可以將div2設置為inline-block實現div垂直水平居中。
- text-align：center + vertical-align：middle
如果想讓div2在div1中居中，那麼需要將父元素設置text-align：center，因為居中效果只對文本內容和行內元素有效，那我們將子元素div2設置為inline-block元素，還要將父元素設置為設置為table-cell元素，vertical-align：middle，
- margin：0 auto+vertical-align：middle
margin: 0 auto；在本身元素上設置，可以實現塊級元素水平居中，所以將子元素設置為margin：0 auto；再還要將父元素設置為設置為table-cell元素，vertical-align：middle即可
- 絕對定位實現垂直水平居中
絕對定位元素垂直水平居中：因為絕對定位元素具有伸縮性，所以如果我們將絕對定位元素的width設置為auto時，同時把left與right設置為0，那麼元素就會將其相對的父元素水平填充滿。這時如果我們把寬度設置為固定值，margin為auto的前提下，只要 left 和 right 的值相等（或都為0），且不超過其相對元素減去該絕對定位元素 width 的一半，就可以實現水平居中了。垂直居中也是如此，只要top與bottom的值也相等或者都為0就可以，這樣我們的絕對定位元素就做到了垂直水平居中了。
