首页 > 试题广场 >

如何实现一个img图片在指定容器中水平垂直居中？

[问答题]
如何实现一个img图片在指定容器中水平垂直居中？
添加回答
牛客5277420号头像 牛客5277420号
left:50%;top:50%;transform:translate(-50%,-50%)
发表于 2016-12-22 17:42:57 回复(1)
Amethyst头像 Amethyst
父元素： 
position: relative;
img: 
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

发表于 2017-08-23 13:13:39 回复(0)
mMelisa头像 mMelisa
<div class="wrap">
    <img src="">
</div>
<style>
/* 法一（IE6/IE7不支持table-cell）：*/
.wrap{ display:table-cell;width:600px;height:600px;text-align:center;vertical-align:middle; }
/* 法二（元素高度/字体大小=1.14时支持垂直居中；font-size和font-family解决）：*/
.wrap{ display:table-cell;width:600px;height:600px;text-align:center;vertical-align:middle; *font-family:simsun;*font-size:200px;}
.wrap img{ vertical-align:middle; } 
/* 法三 */
.wrap{ position:relative; }
.wrap img{ position:absolute;left:50%;top:50%;-webkit-tranform:translate(-50%,-50%);-moz-tranform:translate(-50%,-50%);tranform:translate(-50%,-50%);}
</style>
发表于 2017-08-29 16:08:41 回复(0)
昔阳头像 昔阳 
设置该图片容器的css样式为：
display: table-cell;text-align:center;vertical-align:middle;

发表于 2017-03-07 15:40:40 回复(0)
路雨LY头像 路雨LY
父元素：div{position：relative；}
图片：img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
发表于 2017-12-10 21:52:32 回复(0)
走过路过见过记得头像 走过路过见过记得
<!doctype html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.container{
display:flex;
display:-webkit-flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
}
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
发表于 2017-09-02 15:37:44 回复(0)
阿薇头像 阿薇
假设图片宽度为100px，高度为100px；
父元素  position:relative;
     .img{
         width: 100px;
         height: 100px;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
    }
发表于 2017-08-28 10:08:36 回复(0)
我是小栗子头像 我是小栗子

我上面的三位大神分别用了css3的居中，table-cell特有的属性和盒子模型的margin来解决，小弟不才，推荐不那么兼容ie的方法：

display:flex;
justify-content:center;
align-items:center
}

当然了，元素要有高度才行

发表于 2017-08-24 23:10:48 回复(0)
提交观点

问题信息

2017 前端工程师 挖财 HTML
来自：挖财2017校招前端工...
上传者：牛100
难度：
8条回答 4689浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号