原始代码：
center.html：
<!doctype html><html lang="zh"><head> <meta chart="utf-8"> <meta name="viewport" conte能开二月花全诗nt="width=device-width, initial-scale=1.0"> <title>center</title> <link rel="stylesheet" href="center.css"></head><body> <div cl除法算式题ass="father"> <div class="son"></div> </div></body></html>
center.css：
body { background-color: #6ed0ff;}.father { background-color: #be33ec; border-radius: 20px; box-shadow: 0 0 15px rgb(0, 0, 0); margin: 100px auto; width: 300px; height: 300px;}使至塞上 古诗.son { background-color: #fcff00; border-radius: 20px; box-shadow: 0 0 10px rgb(0, 0, 0); width: 100px; height: 100px;}原始效果：
实现子盒子相对于父盒子垂直居中效果：
1. grid
.father { display: grid;}.son { align-lf: center; justify-lf: center;}2. absolute + 负margin
.father { position: relative;}.son { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px;}3. absolute + transform
.father { position: relative;}.son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%教师年度考核自我鉴定);}4. absolute + margin: auto
.father { position: relative;}.son { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}5. flex
.father { display: flex; justify-content: center; align-items: center;}6. margin+transfrom
.father { overflow: hidden;}.son { margin: 50% auto; transform: translatey(-50%);}7. table-cell
.fa当兵的ther { display: table-cell; text-align: center; vertical-align: middle;}.son { display: inline-block;}8. inline-block + vertical-align
.father { text-align: center; line-height: 300px;}.son { display: inline-block; vertical-align: middle;}到此这篇关于使用css实现盒子水平垂直居中的方法(8种)的文章就介绍到这了,更多相关css 盒子水平垂直居中内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-07 14:49:38，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1b5431f3b597b21dfd545e0b76a36f6b.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：使用CSS实现盒子水平垂直居中的方法(8种).doc
本文 PDF 下载地址：使用CSS实现盒子水平垂直居中的方法(8种).pdf
| 留言与评论（共有 0 条评论） |
