How to vertically center an image within a fixed div

Question

I'm trying to vertically center this image within the fixed position divs, but I cannot seem to get it to work. I have read other questions and the answers I've found don't work with a fixed position like I need. What am I missing? Thanks!

JSFiddle: https://jsfiddle.net/fudt38j4/

<div id="container">
<div id="logocontainer">    
<a href="/"> <img src="images/logo.svg" alt="Logo." /> </a>
</div>      
</div>  

#container {
    background-color: black;
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#logocontainer {
    position: fixed;
    margin: 0 auto;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#logocontainer img {
    width: 100%;
}

your container has not real height value // 100% of what ? – Mister Jojo Jan 01 '20 at 16:35 — Mister Jojo, Jan 01 '20 at 16:35

Ahed Kabalan · Accepted Answer · 2020-01-01T18:36:20.317

2

You can just replace display: inline-block in #logocontainer to be display: flex

#container {
    background-color: black;
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#logocontainer {
    position: fixed;
    margin: 0 auto;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#logocontainer a{
   width: 100%;
   height: 50%;
   overflow: hidden;
}

#logocontainer img {
    width: 100%;
    height: 100%;
}

<div id="container">
<div id="logocontainer">    
<a href="/"> <img src="https://cdn.vox-cdn.com/thumbor/0n6dqQfk9MuOBSiM39Pog2Bw39Y=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/19341372/microsoftedgenewlogo.jpg" alt="Logo." /> </a>
</div>      
</div>

edited Jan 01 '20 at 18:36

answered Jan 01 '20 at 16:36

Ahed Kabalan

815
6
8

While flex is working in safari, when I try this in Chrome and Firefox, it is not working. In chrome, the logo's size is altered incorrectly (no longer 50% width like it is correctly in Safari) and in Firefox the logo is no longer visible at all. Do you know what may be causing this? – John Smith Jan 01 '20 at 18:19
I've just updated the answer, please try again. – Ahed Kabalan Jan 01 '20 at 18:36
Perfect! Thank you so much, this fixed it. Can you explain what changed? – John Smith Jan 01 '20 at 18:53
Image is wrapped inside a link container, I just added properties width and height for both container and image. – Ahed Kabalan Jan 01 '20 at 19:16

score 0 · Answer 2 · answered Jan 01 '20 at 16:37

0

You can use top and translate to move it around:

#logocontainer img {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

Here is the working fiddle: https://jsfiddle.net/ospe930d/

answered Jan 01 '20 at 16:37

Cafer Elgin

393
2
12

How to vertically center an image within a fixed div

2 Answers2