Vertically align an image inside a div with responsive height

Question

I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

How can I vertically align the IMG inside the container? All my images have variable heights and the container can't have a fixed height/line height because it's responsive... Please help!

User · Answer

I came across this thread in search of a solution that:

uses 100% of the given image's width
keeps the image aspect ratio
keeps the image vertically aligned to the middle
works in browsers that do not fully support flex

Testing some of the solutions posted above I didn't find one to meet all of this criteria, so I put together this simple one which might be useful for other people needing to do the same:

_x000D_

.container {_x000D_
  width: 30%;_x000D_
  float: left;_x000D_
  border: 1px solid turquoise;_x000D_
  margin-right: 3px;_x000D_
  margin-top: 3px;_x000D_
}_x000D_
_x000D_
.container:last-of-kind {_x000D_
  margin-right: 0px;_x000D_
}_x000D_
_x000D_
.image-container {_x000D_
  position: relative;_x000D_
  overflow: hidden;_x000D_
  padding-bottom: 70%;_x000D_
  /* this is the desired aspect ratio */_x000D_
  width: 100%;_x000D_
}_x000D_
_x000D_
.image-container img {_x000D_
  position: absolute;_x000D_
  /* the following 3 properties center the image on the vertical axis */_x000D_
  top: 0;_x000D_
  bottom: 0;_x000D_
  margin: auto;_x000D_
  /* uses image at 100% width (also meaning it's horizontally center) */_x000D_
  width: 100%;_x000D_
}

_x000D_

<div class="container">_x000D_
  <div class="image-container">_x000D_
    <img src="http://placehold.it/800x800" class="img-responsive">_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
<div class="container">_x000D_
  <div class="image-container">_x000D_
    <img src="http://placehold.it/800x800" class="img-responsive">_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
<div class="container">_x000D_
  <div class="image-container">_x000D_
    <img src="http://placehold.it/800x800" class="img-responsive">_x000D_
  </div>_x000D_
</div>

_x000D_

Working example on JSFiddle

User · Answer

Try  Html   lt div class  responsive-container  gt        lt div class  img-container  gt            lt IMG HERE gt        lt  div gt   lt  div gt    CSS   img-container       position  absolute      top  0      left  0  height 0  padding-bottom 100      img-container img   width 100

User · Answer

Try this one     responsive-container            display table         img-container            display table-cell            vertical-align  middle

User · Answer

With flexbox this is easy   FIDDLE  Just add the following to the image container    img-container       position  absolute      top  0      bottom  0      left  0      right  0      display  flex     add        justify-content  center     add to align horizontal        align-items  center     add to align vertical

User · Answer

Here s a technique that allows you to center ANY content both vertically and horizontally   Basically  you just need a two containers and make sure your elements meet the following criteria   The outher container     should have display  table    The inner container     should have display  table-cell  should have vertical-align  middle  should have text-align  center    The content box     should have display  inline-block    If you use this technique  just add your image  along with any other content you want to go with it  to the content box   Demo     x000D   x000D  body   x000D      margin   0  x000D    x000D   x000D   outer-container   x000D      position   absolute  x000D      display  table  x000D      width  100   x000D      height  100   x000D      background   ccc  x000D    x000D   x000D   inner-container   x000D      display  table-cell  x000D      vertical-align  middle  x000D      text-align  center  x000D    x000D   x000D   centered-content   x000D      display  inline-block  x000D      background   fff  x000D      padding   12px  x000D      border   1px solid  000  x000D    x000D   x000D  img   x000D     max-width   120px  x000D    x000D   lt div class  outer-container  gt  x000D      lt div class  inner-container  gt  x000D        lt div class  centered-content  gt  x000D           lt img src  https   i stack imgur com mRsBv png    gt  x000D        lt  div gt  x000D      lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    See also this Fiddle

User · Answer

Use this css  as you already have the markup for it    img-container       position  absolute      top  50       left  50       img-container  gt  img     margin-top -50     margin-left -50         Here is a working JsBin  http   jsbin com ihilUnI 1 edit  This solution only works for square images  because a percentage margin-top value depends on the width of the container  not the height   For random-size images  you can do the following    img-container       position  absolute      top  50       left  50       transform  translate -50   -50       add browser-prefixes        Working JsBin solution  http   jsbin com ihilUnI 2 edit

User · Answer

Make another div and add both  dummy  and  img-container  inside the div  Do HTML and CSS like follows   x000D   x000D  html   body  height 100    x000D   responsive-container   height 100   display table  text-align center  width 100    x000D   inner-container  display table-cell  vertical-align middle   x000D   lt div class  responsive-container  gt  x000D       lt div class  inner-container  gt  x000D     lt div class  dummy  gt Sample lt  div gt  x000D     lt div class  img-container  gt  x000D     Image tag x000D     lt  div gt  x000D    lt  div gt   x000D   lt  div gt  x000D   x000D   x000D    Instead of 100  for the  responsive-container  you can give the height that you want

User · Answer

html code   lt div class  image-container  gt       lt img src     gt      lt  div gt   css code  img     position  relative    top  50     transform  translateY -50

User · Answer

Here is a technique to align inline elements inside a parent  horizontally and vertically at the same time   Vertical Alignment  1  In this approach  we create an inline-block  pseudo- element as the first  or last  child of the parent  and set its height property to 100  to take all the height of its parent   2  Also  adding vertical-align  middle keeps the inline -block  elements at the middle of the line space  So  we add that CSS declaration to the first-child and our element  the image  both   3  Finally  in order to remove the white space character between inline -block  elements  we could set the font size of the parent to zero by font-size  0    Note  I used Nicolas Gallagher s image replacement technique in the following   What are the benefits    The container  parent  can have dynamic dimensions  There s no need to specify the dimensions of the image element explicitly  We can easily use this approach to align a  lt div gt  element vertically as well  which may have a dynamic content  height and or width   But note that you have to re-set the font-size property of the div to display the inside text  Online Demo     lt div class  container  gt       lt div id  element  gt       lt  div gt   lt  div gt     container       height  300px      text-align  center      align the inline -block  elements horizontally        font  0 0 a             remove the gap between inline -block  elements        container before         create a full-height inline block pseudo element        content           display  inline-block      vertical-align  middle      vertical alignment of the inline element        height  100       element       display  inline-block      vertical-align  middle      vertical alignment of the inline element        font  16px 1 Arial sans-serif             lt -- reset the font property        The output    Responsive Container  This section is not going to answer the question as the OP already knows how to create a responsive container  However  I ll explain how it works   In order to make the height of a container element changes with its width  respecting the aspect ratio   we could use a percentage value for top bottom padding property   A percentage value on top bottom padding or margins is relative to the width of the containing block   For instance    responsive-container     width  60      padding-top  60         1 1 Height is the same as the width      padding-top  100        width height   60 100 or 3 5             padding-top  45           60    3 4   width height    4 3        padding-top  33 75        60    9 16  width height   16 9          Here is the Online Demo  Comment out the lines from the bottom and resize the panel to see the effect   Also  we could apply the padding property to a dummy child or  before  after pseudo-element to achieve the same result  But note that in this case  the percentage value on padding is relative to the width of the  responsive-container itself    lt div class  responsive-container  gt     lt div class  dummy  gt  lt  div gt   lt  div gt     responsive-container   width  60       responsive-container  dummy     padding-top  100          1 1 square      padding-top  75           w h    4 3      padding-top  56 25        w h   16 9        Demo  1  Demo  2  Using  after pseudo-element   Adding the content  Using padding-top property causes a huge space at the top or bottom of the content  inside the container   In order to fix that  we have wrap the content by a wrapper element  remove that element from document normal flow by using absolute positioning  and finally expand the wrapper  bu using top  right  bottom and left properties  to fill the entire space of its parent  the container   Here we go    responsive-container     width  60     position  relative      responsive-container  wrapper     position  absolute    top  0  right  0  bottom  0  left  0      Here is the Online Demo     Getting all together   lt div class  responsive-container  gt     lt div class  dummy  gt  lt  div gt      lt div class  img-container  gt       lt img src  http   placehold it 150x150  alt    gt     lt  div gt   lt  div gt     img-container     text-align center     Align center inline elements      font  0 0 a           Hide the characters like spaces        img-container before     content         display  inline-block    vertical-align  middle    height  100       img-container img     vertical-align  middle    display  inline-block      Here is the WORKING DEMO   Obviously  you could avoid using   before pseudo-element for browser compatibility  and create an element as the first child of the  img-container    lt div class  img-container  gt       lt div class  centerer  gt  lt  div gt       lt img src  http   placehold it 150x150  alt    gt   lt  div gt     img-container  centerer     display  inline-block    vertical-align  middle    height  100       UPDATED DEMO   Using max-  properties  In order to keep the image inside of the box in lower width  you could set max-height and max-width property on the image    img-container img       vertical-align  middle      display  inline-block      max-height  100        lt -- Set maximum height to 100  of its parent        max-width  100         lt -- Set maximum width to 100  of its parent        Here is the UPDATED DEMO

User · Answer

You can center an image  both horizontally and vertically  using margin  auto and absolute positioning  Also    It is possible to ditch extra markup by using pseudo elements  It is possible to display the middle portion of LARGE images by using negative left  top  right and bottom values     x000D   x000D   responsive-container   x000D    margin  1em auto  x000D    min-width  200px           cap container min width    x000D    max-width  500px           cap container max width    x000D    position  relative       x000D    overflow  hidden           crop if image is larger than container    x000D    background-color   CCC   x000D    x000D   responsive-container before   x000D    content                    using pseudo element for 1 1 ratio    x000D    display  block  x000D    padding-top  100   x000D    x000D   responsive-container img   x000D    position  absolute  x000D    top  -999px                use sufficiently large number    x000D    bottom  -999px  x000D    left  -999px  x000D    right  -999px  x000D    margin  auto               center horizontally and vertically    x000D    x000D   lt p gt Note  images are center-cropped on  amp lt 400px screen width  x000D     lt br gt Open full page demo and resize browser  lt  p gt  x000D   lt div class  responsive-container  gt  x000D     lt img src  http   lorempixel com 400 400 sports 9   gt  x000D   lt  div gt  x000D   lt div class  responsive-container  gt  x000D     lt img src  http   lorempixel com 400 200 sports 8   gt  x000D   lt  div gt  x000D   lt div class  responsive-container  gt  x000D     lt img src  http   lorempixel com 200 400 sports 7   gt  x000D   lt  div gt  x000D   lt div class  responsive-container  gt  x000D     lt img src  http   lorempixel com 200 200 sports 6   gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Vertically align an image inside a div with responsive height

The answer is

The outher container :

The inner container :

The content box :

Demo :

Examples related to html

Examples related to css

Examples related to responsive-design

Examples related to vertical-alignment

Tags