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

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

滑稽
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,717评论 1 92
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,969评论 0 6
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,581评论 0 30
  • 详细调漂教程 调不好漂的新手赶紧收藏 逛论坛时偶尔发现一些新钓友对调漂不是很清楚,对饵在水下的状态不是很了解,我...
    42度半阅读 1,873评论 0 0
  • 我就是喜欢折腾,刚好遇到了一群爱折腾的。 “谁要找我聊聊?”浑厚的嗓音飘过来了,我疑惑的看着眼前这个身材魁梧端着小...
    泥巴创客空间阅读 3,764评论 0 0

友情链接更多精彩内容