Center Image in the middle of the page

Issue

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 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>

Answered By - ruleboy21