Centering element horizontally vertically

HTML

<div id="over">
    <img class="Centered" src="https://create.adobe.com/content/dam/2018/03/black-and-white-photographers-on-instagram/soyboytoy.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{  
    border: 1px solid red;
    position:absolute;
    width:50%;
    height:50%;
    text-align: center;
}
#over:before
{
    content: "";
    display: inline-block;
    height: 50%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
    width:100%;
    height:100%;
}