您好,欢迎来到华佗养生网。
搜索
您的当前位置:首页元素水平垂直居中的css3实现实例代码

元素水平垂直居中的css3实现实例代码

来源:华佗养生网


这篇文章主要为大家详细介绍了元素水平垂直居中的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>

则图片居中

Copyright © 2019- huatuo7.cn 版权所有 湘ICP备2022005869号-9

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务