Center image vertically in div [duplicate] - css

Question

This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 5 years ago.
Basically screen is split in 2 part, left for logo, right for sponsor image.
I would like to vertical align the two image in center of screen. Now images are align on top of screen. I don't understand how to solve. Can you give some hint?
#logo {
float:left;
width: 50%;
height:100%;
}
#imgLogo {
height:100%;
}
#sponsor {
float:left;
width: 50%;
height:100%;
background:#ffffff;
display: inline-block;
vertical-align: middle;
}
#imgSponsor {
max-height:90%;
max-width:90%;
display: inline-block;
vertical-align: middle;
}
.app {
position:absolute;
left:0%;
top:0%;
height:100%;
width:100%;
text-align:center;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="logo.png">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="http://www.foo.bar/wp-content/uploads/2017/10/foobar.jpg">
</a>
</div>
</div>

Answer 1

Here is a way you could approach your layout using flexbox:
body {
margin: 0;
}
.app {
display: flex;
align-items: center;
height: 100vh;
}
.app div {
flex: 1;
}
img {
width: 100%;
height: auto;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="https://unsplash.it/200x200">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="https://unsplash.it/200x200">
</a>
</div>
</div>

Answer 2

You can use these 2 in your code which will center-center your image.
#logo {
float:left;
width: 50%;
height:100%;
}
#imgLogo {
height:100%;
}
#sponsor {
float:left;
width: 50%;
height:100%;
background:#ffffff;
display: inline-block;
vertical-align: middle;
text-align: center;
}
#imgSponsor {
max-height:90%;
max-width:90%;
display: inline-block;
vertical-align: middle;
}
.app {
position:absolute;
left:0%;
top:0%;
height:100%;
width:100%;
text-align:center;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="logo.png">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="http://www.foo.bar/wp-content/uploads/2017/10/foobar.jpg">
</a>
</div>
</div>
or you can use:
background-position: center center:

Answer 3

That is where CSS flex comes very handy:
body {
margin: 0;
}
.app {
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: space-around;
}
#sponsor, #logo {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#imgLogo {
height: 100%;
}
#imgSponsor {
max-height:90%;
max-width:90%;
}
#sponsor a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="https://placehold.it/200x200">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="https://placehold.it/200x200">
</a>
</div>
</div>