CSS中的垂直居中问题

自学前端很久了，却发现自己几乎没有什么作总结的手段。
很多东西很快就忘记了令我深感苦恼，所以我希望从现在开始记录下学习中遇到的问题，并进行归纳总结。
这是我第一次写文章，如有错误或其他不妥之处，欢迎各位指正和补充。

CSS中的垂直居中问题分为元素垂直居中和文本垂直居中两种。

首先说说元素垂直居中几种实用的方法。

元素垂直居中示意图.png

1.父元素与子元素的宽高都为精确的值（这个就不说了）。
2.父元素宽高可以为百分比，子元素宽高必须为精确的值。

添加以下属性。

1.png

3.父元素与子元素的宽高都可以为百分比。

添加以下属性。

2.png

或者

3.png

4.使用Flex布局

这个太简单了，你只需要给父元素加上下面这三行就可以了。
父元素和子元素的宽高都可以为百分比。

4.png

再来说说文本垂直居中的几种实用方法。

文本居中示意图.png

1.容器的高度为精确的值。

这个最简单，只需要添加以下属性。

1.png

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

添加以下属性。

2.png

值的注意的是，当使用独立table的时候，是无法设置border的。也就是说上面的效果图会变成下面这样。

border消失了.png

3.使用Flex！

与上面的元素垂直居中一样，文本垂直居中也能用相同的手法。
给容器加上这三行。

3.png

好了，我暂时想到的就只有这些了，有哪里说错的地方欢迎指正出来。
如果大家有什么其他的好方法也欢迎补充。

滑稽