css - How to vertically align an image inside a div

Question 1

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {      height: 25px;      /* Equals maximum image height */      width: 160px;      border: 1px solid red;      white-space: nowrap; /* This is required unless you put the helper span closely near the img */        text-align: center;      margin: 1em 0;  }    .helper {      display: inline-block;      height: 100%;      vertical-align: middle;  }    img {      background: #3A6F9A;      vertical-align: middle;      max-height: 25px;      max-width: 160px;  }

<div class="frame">      <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />  </div>  <div class="frame">      <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />  </div>  <div class="frame">      <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />  </div>  <div class="frame">      <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />  </div>  <div class="frame">      <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />  </div>  <div class="frame">      <span class="helper"></span>      <img src="http://jsfiddle.net/img/logo.png" height=17px />  </div>  <div class="frame">      <span class="helper"></span>      <img src="http://jsfiddle.net/img/logo.png" height=15px />  </div>  <div class="frame">      <span class="helper"></span>      <img src="http://jsfiddle.net/img/logo.png" height=13px />  </div>  <div class="frame">      <span class="helper"></span>      <img src="http://jsfiddle.net/img/logo.png" height=11px />  </div>  <div class="frame">      <span class="helper"></span>      <img src="http://jsfiddle.net/img/logo.png" height=9px />  </div>  <div class="frame">      <span class="helper"></span>      <img src="http://jsfiddle.net/img/logo.png" height=7px />  </div>  <div class="frame">      <span class="helper"></span>      <img src="http://jsfiddle.net/img/logo.png" height=5px />  </div>  <div class="frame">      <span class="helper"></span>      <img src="http://jsfiddle.net/img/logo.png" height=3px />  </div>

Or, if you don't want to have an extra element in modern browsers and don't mind using Internet Explorer expressions, you can use a pseudo-element and add it to Internet Explorer using a convenient Expression, that runs only once per element, so there won't be any performance issues:

The solution with :before and expression() for Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {      height: 25px;      /* Equals maximum image height */      width: 160px;      border: 1px solid red;      white-space: nowrap;        text-align: center;      margin: 1em 0;  }    .frame:before,  .frame_before {      content: "";      display: inline-block;      height: 100%;      vertical-align: middle;  }    img {      background: #3A6F9A;      vertical-align: middle;      max-height: 25px;      max-width: 160px;  }    /* Move this to conditional comments */  .frame {      list-style:none;      behavior: expression(          function(t){              t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');              t.runtimeStyle.behavior = 'none';          }(this)      );  }

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>  <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

How it works:

When you have two inline-block elements near each other, you can align each to other's side, so with vertical-align: middle you'll get something like this:
When you have a block with fixed height (in px, em or another absolute unit), you can set the height of inner blocks in %.
So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.

Question 2

This might be useful:

div {     position: relative;     width: 200px;     height: 200px; } img {     position: absolute;     top: 0;     bottom: 0;     margin: auto; } .image {     min-height: 50px }

Question 3

matejkramny's solution is a good start, but oversized images have a wrong ratio.

Here's my fork:

Demo: https://jsbin.com/lidebapomi/edit?html,css,output

preview

HTML:

<div class="frame">   <img src="foo"/> </div>

CSS:

.frame {     height: 160px; /* Can be anything */     width: 160px; /* Can be anything */     position: relative; } img {     max-height: 100%;     max-width: 100%;     width: auto;     height: auto;     position: absolute;     top: 0;     bottom: 0;     left: 0;     right: 0;     margin: auto; }

Question 4

A three-line solution:

position: relative; top: 50%; transform: translateY(-50%);

This applies to anything.

From here.

Question 5

A pure CSS solution:

.frame {    margin: 1em 0;    height: 35px;    width: 160px;    border: 1px solid red;    position: relative;  }    img {    max-height: 25px;    max-width: 160px;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;    background: #3A6F9A;  }

<div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=250 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=25 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=23 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=21 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=19 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=17 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=15 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=13 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=11 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=9 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=7 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=5 />  </div>  <div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=3 />  </div>

Key stuff

// position: relative; - in .frame holds the absolute element within the frame // top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component // margin: auto; - centers the image horizontally & vertically

css - How to vertically align an image inside a div

Top 5 Answer for css - How to vertically align an image inside a div

Top 3 video Explaining css - How to vertically align an image inside a div

Related QUESTION?