Center Image in the middle of the page

February 9, 2022

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://imgur.com/a/eVtfGdi

>Solution :

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>