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

前端未结

关注

 30  1637

野性不改

相关标签:

30条回答

清歌不尽

2020-11-22 02:31

Use Flexbox:

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}

0 讨论(0)

借酒劲吻你

2020-11-22 02:31

@sleepy You can easily do this using the following attributes:

#content {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#myImage {
  display: block;
  width: 50px;
  height: 50px;  
  margin: auto;
  border: 1px solid yellow;
}

<div id="content">
  <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

References: W3

0 讨论(0)

庸人自扰

2020-11-22 02:31

We can easily achieve this using flex. no need for background-image.

<!DOCTYPE html>
<html>
<head>
   <style>
      #image-wrapper{
         width:500px;
         height:500px;
         border:1px solid #333;
         display:flex;
         justify-content:center;
         align-items:center;
      }
   </style>
</head>
<body>

<div id="image-wrapper">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

</body>
</html>

0 讨论(0)

星月不相逢

2020-11-22 02:34
here's another method to center everything within anything.

Working Fiddle

HTML: (simple as ever)
```
<div class="Container">
    <div class="Content"> /*this can be an img, span, or everything else*/
        I'm the Content
    </div>
</div>
```
CSS:
```
.Container
{
    text-align: center;
}

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}
```
Benefits

The Container and Content height are unknown.

Centering without specific negative margin, without setting the line-height (so it works well with multiple line of text) and without a script, also Works great with CSS transitions.
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤独总比滥情好

2020-11-22 02:35
in the div
```
style="text-align:center; line-height:200px"
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

忘了有多久

2020-11-22 02:37

This works correctly:

display: block;
margin-left: auto;
margin-right: auto

else try this if the above only gives you horizontal centering:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

0 讨论(0)

热议问题