酷趣黑科技 - 分享酷炫有趣的黑科技 ,欢迎关注收藏。
五种方式实现div里的img图片水平垂直居中
方法一:
将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。
<code class="gl language-css line-numbers"><style type="text/css"> *{margin: 0;padding: 0;} div{ width:150px; height: 100px; display: table-cell; vertical-align: middle; text-align: center; border:1px solid #000; } img { width: 50px; height: 50px; } </style></code>
方法二:
通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。
<code class="gl"><style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; position: relative; border:1px solid #000; } img { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; margin-top: -25px; /* 高度的一半 */ margin-left: -25px; /* 宽度的一半 */ } </style></code>
方法三:
可以用在不清楚图片图片或元素的真实宽高情况下
还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);
<code class="gl"><style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; position: relative; border:1px solid #000; } img { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style></code>
方法四:
<code class="gl"><style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; position: relative; border:1px solid #000; } img { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style></code>
方法五:
弹性布局flex
<code class="gl"><style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; border:1px solid #000; display: flex; justify-content: center; align-items: center; } img { width: 50px; height: 50px; } </style></code>
酷趣黑科技 – 酷折腾 | 酷学习 | 酷分享,欢迎扫描右侧微信公众号关注收藏。
微信扫描下方的二维码阅读并评论
- 本文由 【酷趣谈-酷趣黑科技】 发布,关注官方微信公众号【酷趣黑科技】,免费分享炫酷、有趣的黑科技资讯、手机软件、电脑软件、电视软件、福利资源。
- 转载请注明本文标题:html五种方式实现div里的img图片水平垂直居中-酷趣谈-酷趣黑科技
- 同时注明本文链接:https://www.kuqutan.com/1594.html
0 学习了。