自学前端很久了,却发现自己几乎没有什么作总结的手段。
很多东西很快就忘记了令我深感苦恼,所以我希望从现在开始记录下学习中遇到的问题,并进行归纳总结。
这是我第一次写文章,如有错误或其他不妥之处,欢迎各位指正和补充。
CSS中的垂直居中问题分为元素垂直居中和文本垂直居中两种。
首先说说元素垂直居中几种实用的方法。
1.父元素与子元素的宽高都为精确的值(这个就不说了)。
2.父元素宽高可以为百分比,子元素宽高必须为精确的值。
添加以下属性。
3.父元素与子元素的宽高都可以为百分比。
添加以下属性。
或者
4.使用Flex布局
这个太简单了,你只需要给父元素加上下面这三行就可以了。
父元素和子元素的宽高都可以为百分比。
再来说说文本垂直居中的几种实用方法。
1.容器的高度为精确的值。
这个最简单,只需要添加以下属性。
2.容器的高度为百分比。
添加以下属性。
值的注意的是,当使用独立table的时候,是无法设置border的。也就是说上面的效果图会变成下面这样。
3.使用Flex!
与上面的元素垂直居中一样,文本垂直居中也能用相同的手法。
给容器加上这三行。
好了,我暂时想到的就只有这些了,有哪里说错的地方欢迎指正出来。
如果大家有什么其他的好方法也欢迎补充。