这篇文章主要为大家详细介绍了元素水平垂直居中的css3实现实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
话不多说,代码如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>伸缩布局</title> <style type="text/css"> *{ margin: 0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; } div{ height: 100px; width: 100px; overflow: hidden; display:flex; border: 1px dotted red; align-items: center; justify-content:center; } img{ width: 50px; height: 50px; } </style> </head> <body> <div> @@##@@</div> </body> </html>
则图片居中
以上就是元素水平垂直居中的css3实现实例代码的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号