Center image vertically in div

Question

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>

It's important to respect actual impostation of code. Sponsor div should be visibile, 50% width, 100% height and with white backgound. — Simone Giusti, Oct 26 '17 at 16:27

score 0 · Answer 1 · answered Oct 26 '17 at 16:17

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>

Jonathan · Answer 2 · 2017-10-26T16:34:05.843

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>

score 0 · Answer 3 · answered Oct 26 '17 at 16:26

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:

Center image vertically in div

3 Answers3