今天给大家分享的是css让盒子水平垂直居中的方法,本文提供了八种盒子水平垂直居中方法及示例供大家参考,对新手学习和理解css水平垂直居中盒子有一定的帮助,感兴趣的朋友接下来跟随小编一起看看吧。
原始代码:
center.html
:
<!DOCTYPE html> <html lang="Zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center</title> <link rel="stylesheet" href="center.css"> </head> <body> <div class="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-self: center; justify-self: 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
.father { 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实现水平垂直居中盒子的八种方法啦,有需要的朋友可以借鉴参考,希望对大家学习CSS有帮助,想要了解更多从CSS的使用,大家可以继续浏览群英网络其他相关的文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理