自學(xué)前端很久了，卻發(fā)現(xiàn)自己幾乎沒有什么作總結(jié)的手段。
很多東西很快就忘記了令我深感苦惱，所以我希望從現(xiàn)在開始記錄下學(xué)習(xí)中遇到的問題，并進行歸納總結(jié)。
這是我第一次寫文章，如有錯誤或其他不妥之處，歡迎各位指正和補充。

CSS中的垂直居中問題分為元素垂直居中和文本垂直居中兩種。

首先說說元素垂直居中幾種實用的方法。

元素垂直居中示意圖.png

1.父元素與子元素的寬高都為精確的值（這個就不說了）。
2.父元素寬高可以為百分比，子元素寬高必須為精確的值。

添加以下屬性。

1.png

3.父元素與子元素的寬高都可以為百分比。

添加以下屬性。

2.png

或者

3.png

4.使用Flex布局

這個太簡單了，你只需要給父元素加上下面這三行就可以了。
父元素和子元素的寬高都可以為百分比。

4.png

再來說說文本垂直居中的幾種實用方法。

文本居中示意圖.png

1.容器的高度為精確的值。

這個最簡單，只需要添加以下屬性。

1.png

2.容器的高度為百分比。

添加以下屬性。

2.png

值的注意的是，當使用獨立table的時候，是無法設(shè)置border的。也就是說上面的效果圖會變成下面這樣。

border消失了.png

3.使用Flex！

與上面的元素垂直居中一樣，文本垂直居中也能用相同的手法。
給容器加上這三行。

3.png

好了，我暫時想到的就只有這些了，有哪里說錯的地方歡迎指正出來。
如果大家有什么其他的好方法也歡迎補充。

滑稽