Center Image in the middle of the page

Question

I'm attempting to place an image in the center of the page. vertically and horizontally, regardless of screen size. How is this possible?

<label class="img-wrapper">
    <img src="logo.jpg">
</label>

img {
    margin-top: 25%;
    margin-left: 25%;
    margin-right: 25%;
    margin-bottom: 25%;
    padding: 10px;
}

Here's an image explaining what I'm trying to do. https://i.stack.imgur.com/bKJTG.jpg

ruleboy21 · Accepted Answer · 2022-02-09T02:33:15.973

0

You can easily achieve is with flexbox. Try this

.img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

<label class="img-wrapper">
    <img src="logo.jpg">
</label>

edited Feb 09 '22 at 02:33

answered Feb 09 '22 at 02:27

ruleboy21

5,510
4
17
34

score -1 · Answer 2 · answered Feb 09 '22 at 02:29

You can make use of flexbox to align elements. See the snippet below:

*{
  margin: 0;
  padding: 0;
}
.img-wrapper{
  height: 100vh;
  display: flex;
  align-items: center; /*align items vertically*/
  justify-content: center; /*align item horizontally*/
}

img {
   width: 50vh;
   height: 50vh;
}

<label class="img-wrapper">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fm.media-amazon.com%2Fimages%2FI%2F61yBDRJCKBL._SL500_.jpg&f=1&nofb=1">
</label>

Center Image in the middle of the page

2 Answers2