Vertically centering image in a div tag [duplicate]

Answer 1

Position centering has long been an issue with css. All of the above suggestions work, but every one of them has a slightly hacky feel. If you don't need to support IE or Opera, start using the html5 flexible-box model which is awesome: http://www.html5rocks.com/en/tutorials/flexbox/quick/

.centerbox {
  /* basic styling */
  width: 350px;
  height: 95px;
  font-size: 14px;
  border: 1px solid #555;
  background : #CFC;

  /* flexbox, por favor */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

Answer 2

Assuming you know the height of your image, position it absolutely with top: 50% and a top margin that is half the height of the image. So for a 100x100 image:

div.imgContainer
{
    position: relative;
}
div.imgContainer > img
{
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
}

Answer 3

There are two options for dynamic vertical centering.

1. You use Javascript to get the height of the element and then do some math to set the top of the element to half of the height of the parent minus half of the element.
2. You use display: table and percentages to get it to align properly, as shown by this article.

I've also had some luck with line-height and vertical-align, but that's not dynamic.

Answer 4

There is a trick doing it with line-height:

<div style="
height: /*div height in px here */ px; 
line-height: /*div height in px here */ px;
text-align:center;">

<img src="URL" style="vertical-align:middle;" />

</div>