How to vertically center a image in a div?

Question

I have the following image in a div

  <div id="left-control">
      <img src="img/icons/ic_next_3x_re.png" />
   </div>

Here is the css

#left-control {
   height: 100%;
   float: left;
}

#left-control > img {
    display: block;
    margin: 250px 0;
    z-index: 1;
}

But for some reason I can't seem to vertically center the image no matter what CSS I try. Any suggestions?

possible duplicate of [How to vertically center content with variable height within a div?](http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div) — benjarwar, Aug 05 '15 at 23:12
Also, setting the background-color on your div to red will reveal why you're not seeing vertical centering. — adamdc78, Aug 05 '15 at 23:17

RhapX · Answer 1 · 2015-08-05T23:26:59.843

3

There isn't an amazing way to accomplish this, but what is below should do the trick.

#left-control {
   float: left;
   height: 100%;
}

#left-control:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#left-control img {
    vertical-align: middle;
    z-index: 1;
}

Here is a simple fiddle. Keep in mind that I manually set the height for the #left-control element in this example since fiddle wasn't allowing for 100%.

edited Aug 05 '15 at 23:26

answered Aug 05 '15 at 23:19

RhapX

1,663
2
10
17

hey is there a way to horizontally center as well with this? `margin: 0 auto;` does not seem to work. [fiddle here](https://jsfiddle.net/KheKhe/g794em4b/1/) – Solace Jan 01 '16 at 05:51
1

@Solace Remove the float: left; and add text-align: center; – RhapX Jan 02 '16 at 08:33

score 0 · Answer 2 · answered Aug 05 '15 at 23:24

You can use CSS tables to accomplish this.

.wrapper {
   display: table;
  height: 300px;
  border: 1px solid black;
}
#left-control {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

#left-control > .img {
  display: inline-block;
  width: 100px;
  height: 100px;
  z-index: 1;
  background: red;
}

<div class="wrapper">
  <div id="left-control">
    <div class="img"></div>
  </div>
</div>

score 0 · Answer 3 · answered Aug 06 '15 at 08:35

you could wrap the img, inside another div like so..

<div id="left-control">
      <div class="vert-align">
         <img src="img/icons/ic_next_3x_re.png" />
      </div>
   </div>

then, in the css do something like this...

#left-control {
   height: 100%;
   position:relative;
}

#left-control > img {
    display: block;
    margin: 250px 0;
    z-index: 1;
}

.vert-align{
    position: absolute:
    margin: auto:
    top:0; left:0; right:0; bottom:0;
    height: 100px;
}

you can play with top left right and bottom properties to set it to the desired position.

How to vertically center a image in a div?

3 Answers3

Linked