How to make an image center (vertically & horizontally) inside a bigger div [duplicate]

前端未结

关注

 30  1577

野性不改

相关标签:

30条回答

天涯浪人

2020-11-22 02:26

.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}

0 讨论(0)

轮回少年

2020-11-22 02:27

You can center an image horizontally and vertically with the code below (works in IE/FF). It will put the top edge of the image at exactly 50% of the browser height, and the margin-top(pulling half the height of the image up) will center it perfectly.

<style type="text/css">
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {vertical-align: middle; width: 100%;}
         #inner {position: relative; top: -50%} /* for explorer only */
</style>


<body style="background-color:#eeeeee">
    <div id="middle">
        <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
            <img src="..." height="..." width="..." />
        </div>
    </div>
</body>

0 讨论(0)

梦谈多话

2020-11-22 02:28
easy
```
img {
    transform: translate(50%,50%);
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
耶瑟儿～

2020-11-22 02:29
I would set your larger div with position:relative; then for your image do this:
```
img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}
```
This only works because you know the dimensions of both the image and the containing div. This will also let you have other items within the containing div... where solutions like using line-height will not.

EDIT: Note... your margins are negative half of the size of the image.
0 讨论(0)
发布评论:

提交评论
- 加载中...
夕颜

2020-11-22 02:29
I've found that Valamas' and Lepu's answers above are the most straightforward answers that deal with images of unknown size, or of known size that you'd rather not hard-code into your CSS. I just have a few small tweaks: remove irrelevant styles, size it to 200px to match the question, and add max-height/max-width to handle images that may be too large.
```
div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
星月不相逢

2020-11-22 02:30
Simply set image margin auto as shown below.
```
img{
 margin:auto;
 width:50%;
 height:auto;
}
```
Check these example
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题