自学前端很久了，却发现自己几乎没有什么作总结的手段。
很多东西很快就忘记了令我深感苦恼，所以我希望从现在开始记录下学习中遇到的问题，并进行归纳总结。
这是我第一次写文章，如有错误或其他不妥之处，欢迎各位指正和补充。
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
好了，我暂时想到的就只有这些了，有哪里说错的地方欢迎指正出来。
如果大家有什么其他的好方法也欢迎补充。
滑稽
网友评论