Moving an image to center of div when vertical align is not working

Question

Hi I am struggling to center an image in a div vertically, wondering if anyone could assist.

<div id="homepage">
    <img src="assets/img/home-logo.png" id="home-logo">
</div>

#home-logo{
  display: block;
  margin: 0 auto;
  vertical-align: middle;}

#homepage{height: 100vh;
  background-color:#fff}

https://stackoverflow.com/questions/20878342/making-image-align-center-of-screen-in-html — Vikram Saini, Oct 10 '18 at 05:05

score 1 · Accepted Answer · edited Oct 29 '18 at 15:39

1

Try using flexbox:

#homepage {
    height: 100vh;
    background-color: #fff;
    display: flex;
    align-items: center;
}

edited Oct 29 '18 at 15:39

Zoe

27,060
21
118
148

answered Oct 10 '18 at 05:05

Vikas Jadhav

4,597
2
19
37

score 0 · Answer 2 · edited Oct 29 '18 at 15:39

0

Try this

<img src="paris.jpg" alt="Paris" class="center"> 
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

edited Oct 29 '18 at 15:39

Zoe

27,060
21
118
148

answered Oct 10 '18 at 05:06

Anish Sharma

177
1
1
12

score 0 · Answer 3 · answered Oct 10 '18 at 05:12

Try this code. May It'll be helpful for you.

#home-logo{
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center; 
}

#homepage{height: 100vh;
    background-color:#fff;
    margin: 0 auto;
    padding: 0;
    text-align: center; 
}

score 0 · Answer 4 · answered Oct 10 '18 at 05:16

use flex for the container and set justify-content: center and align-items: center

#home-logo {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 200px;
}

#homepage {
  display: flex;
  height: 100vh;
  background-color: #fff
  justify-content: center;
  align-items: center;
}

<div id="homepage">
  <img src="assets/img/home-logo.png" id="home-logo">
</div>

Moving an image to center of div when vertical align is not working

4 Answers4