元素水平垂直居中的css3实现实例代码
程序员文章站
2022-05-30 21:41:59
...
这篇文章主要为大家详细介绍了元素水平垂直居中的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> <img src="http://img.mukewang.com/5365d7b10001e8d506350529.jpg" alt="" /></div> </body> </html>
则图片居中
以上就是元素水平垂直居中的css3实现实例代码的详细内容,更多请关注其它相关文章!
下一篇: php中奖概率算法与大转盘等抽奖算法