How to center image vertically in div

Question

I have a div which has a height of 100vh so that it's always the height of the browser screen. Inside of this div I want to place an image and center it vertical to its parent.

The height is variable so I can't use fixed margins. My current Markup is as follows:

HTML

   <div class="textportfolio">

      <h1>This is a title</h1>

      <p class="textbio-small">
      The Roosevelt dime is the current ten-cent piece of the United States.
      </p>

      <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">

   </div>

CSS:

.textportfolio {
    font-family: "Lora", serif;
    margin: 5%;
    background: #e9cca3;
    height: 100vh;
}

img.portfolio-slides-img {
    max-width: 40%;
    max-height: 40%;
    margin: 0 auto;
    display: block;
    }

Does anybody know how to center the image vertically according to the browser height?

Here is the code snippet

.textportfolio {
    font-family: "Lora", serif;
    margin: 5%;
    background: #e9cca3;
    height: 100vh
}

img.portfolio-slides-img {
    margin-top: 15%;
    max-width: 40%;
    max-height: 40%;
    margin: 0 auto;
    display: block;
    }

<div class="textportfolio">
  <h1>This is a title</h1>
  
  <p class="textbio-small">
  The Roosevelt dime is the current ten-cent piece of the United States.
  </p>
  
  <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">
  
  </div>

It's not quite clear what you are after. Is the image supposed to be centered and the text sit **vertically above** of the centered image **or** are you trying to center the whole text/image combo? — Paulie_D, Sep 18 '17 at 12:00
Only the image should be vertically centered inside of the (orange) div. — Mike, Sep 18 '17 at 13:22
Does this answer your question? [How to vertically align an image inside a div](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) — Felix, Mar 25 '20 at 03:28

score 17 · Accepted Answer · answered Sep 18 '17 at 09:40

17

I use this css snippet:

.selector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Applied to your sample: https://jsfiddle.net/nhdh8ycr/4/

answered Sep 18 '17 at 09:40

Emaro

1,397
1
12
21

3

This worked for me, except I had to set `position: relative;` instead. – May 01 '18 at 22:12

score 8 · Answer 2 · answered Sep 18 '17 at 10:39

Centering things in CSS has been a long debated topic where people weigh all the factors and argue what the least convoluted way is.

Then in 2014, something called Flexbox came out and basically obsoleted all that.

When a container has display: flex, there's properties to align its children. And you can anchor it in the middle on either/both axis.

<div id="container">
 <img src="https://i.imgur.com/i9xpVnQ.jpg" />
</div>

html, body {
  height: 100%; /* required to make body occupy the full viewport by default */
}

#container {
  height: 100%;
  display: flex;
  align-items: center; /* horizontal */
  justify-content: center; /* vertical */
}

img {
  height: 200px;
}

https://jsfiddle.net/5goboeey/1/

It's so ubiquitously convenient I think it continues to fly under the radar because people assume it can't be so straightforward.

score 0 · Answer 3 · answered Sep 18 '17 at 09:42

0

maybe this stackoverflow question could help you jsfiddle

code is HTML

<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

CSS

.frame {
height: 25px;      /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;

text-align: center; margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}

answered Sep 18 '17 at 09:42

Mubasher Iqbal

59
1
4

This works because the div where the image is placed ha a fixed height of 25px. But I have a variable height (browser window). So not a solution for my problem. – Mike Sep 18 '17 at 10:32
you can use it in % percentage . – Mubasher Iqbal Sep 18 '17 at 11:52

score 0 · Answer 4 · answered Sep 18 '17 at 09:44

Try this:

.textportfolio {
  font-family: "Lora", serif;
  margin: 5%;
  background: #e9cca3;
  height: 100vh;
  position: relative;
}

img.portfolio-slides-img {
  max-width: 40%;
  max-height: 40%;
  margin: 0 auto;
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  top: 35%
}

<div class="textportfolio">
  <h1>This is a title</h1>

  <p class="textbio-small">
    The Roosevelt dime is the current ten-cent piece of the United States.
  </p>

  <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">

</div>

How to center image vertically in div

4 Answers4