话不多说，代码如下
<!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实现实例代码的详细内容。