您可以在 github 仓库中找到这篇文章中的所有代码。
您可以在此处查看垂直中心 – codesandbox 和水平中心的视觉效果。
通过 css 居中
垂直居中
centering centering
centering
centering
centering
centering
立即学习“前端免费学习笔记（深入）”；
PHP5 和 MySQL 圣经查看详情本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。
centering
立即学习“前端免费学习笔记（深入）”；
centering
centering
.center-by-absolute-margin { position: absolute; top: 0; bottom: 0; margin: auto 0;}.center-by-pseudo-class::before { content: ""; display: inline-block; height: 100%; vertical-align: middle;}.center-by-line-height { height: 200px; line-height: 200;}.center-by-table { display: table-cell; vertical-align: middle;}.center-by-flex { display: flex; align-items: center;}.center-by-grid { display: grid; align-items: center;}.center-by-absolute-parent { position: relative;}.center-by-absolute-child { position: absolute; top: 50%; transform: translatey(-50%);}.center-by-calc { height: 70px; position: relative; top: calc(50% - 35px);}
水平居中
centering centering
centering
centeringcentering
centering
立即学习“前端免费学习笔记（深入）”；
centering
立即学习“前端免费学习笔记（深入）”；
centering
centering
.center-by-fixed-width { width: 70px; margin: 0 auto;}.center-by-text-align { text-align: center;}.center-by-unfixed-width { text-align: center;}.center-by-table { display: table; margin: 0 auto;}.center-by-flex { display: flex; justify-content: center;}.center-by-grid { display: grid; justify-content: center;}.center-by-absolute-parent { position: relative;}.center-by-absolute-child { position: absolute; left: 50%; transform: translateX(-50%);}.center-by-calc { width: 70px; margin-left: calc(50% - 35px);}
以上就是居中 – CSS 挑战的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632115.html
微信扫一扫 
支付宝扫一扫 
