CSS实现水平|垂直居中漫谈
利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。而撸起垂直居中,相信于大多初撸者来说,与我相似,内心是抗拒的。于此,以我司同事一内部分享为基,加以搜集完善,得8种CSS垂直居中书写之法;个中有示例Demo,以及代码和优劣之评。
原文首链:CSS实现水平|垂直居中漫谈
- CSS实现水平居中(3法)
- CSS实现垂直居中(8法)
- CSS文本垂直居中(5法)[Update: 2016-01-06]
注解: 好吧,周末被“加班”了耶,搞搞需求整整Blog还算闲适;在写居中示例时,搜肠刮肚没什么适宜之词,便逼的自己“什兴大发“,特胡驺几句自黑乱言,填充内容,耶聊以慰籍;贴之于下,祈与同道者共嗨 😄。
周末把码黄昏后,有咸香盈袖。 莫道不消魂,独弄键盘,人比黄花瘦。 真可谓:天堂有路你不走,学海无涯苦作舟。 到头来:码山有路勤为径?三十功名尘与土。 饶上个:一入'哀啼'深似海,从此'逍遥'没长'苏'。
--更新于2015-11-25 之后在CodePen有看到一文将__绝对居中__阐述的更为全面,链接如下:
http://codepen.io/shshaw/full/gEiDt
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?