[html] Align image in center and middle within div

I have following div

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

How to align the image so as to be located in the middle and center of div ?

This worked for me when you have to center align image and your parent div to image has covers whole screen. i.e. height:100% and width:100%

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

for a long time, i also tried the solution to put the img at the center of the div, but for my case i just need this type of component on ajax loading progress so i simply tried the following solution, hope this helps for you!

<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>

A simple way would be creating separate styles for both the div and the image and then position them independently. Say if I want to set my image position to 50%, then I would have code which looks like the following....

#over{_x000D_
  position:absolute;_x000D_
  width:100%;_x000D_
  height:100%;_x000D_
}_x000D_
#img{_x000D_
  position:absolute;_x000D_
  left:50%;_x000D_
  right:50%;_x000D_
}

<div id="over">_x000D_
 <img src="img.png" id="img">_x000D_
</div>

Basically, setting right and left margin to auto will cause the image to center align.

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>

Just set parent div css property "text-align:center;"

 <div style="text-align:center; width:100%">
        <img src="img.png"> 
 </div>

img.centered {
   display: block;
   margin: auto auto;
}

#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

Modify height value for your need.

The marked answer for this will not vertically align the image. A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>

Seems to me that you also wanted that image to be vertically centered within the container. (I didn't see any answer that provided that)

Working Fiddle:

1. Pure CSS solution
2. Not breaking the document flow (no floats or absolute positioning)
3. Cross browser compatibility (even IE6)
4. Completely responsive.

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

Note: this solution is good to align any element within any element. for IE7, when applying the .Centered class on block elements, you will have to use another trick to get the inline-block working. (that because IE6/IE7 dont play well with inline-block on block elements)

You can do this easily by using display:flex css property

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

This would be a simpler approach

#over > img{
    display: block;
    margin:0 auto; 
}

Use positioning. The following worked for me...

With zoom to the center of the image (image fills the div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Without zoom to the center of the image (image does not fill the div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

I add some more properties to the CSS. Like so:

div#over {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-align-items: center;
    display: -webkit-flex;
    display: -ms-flex; 
    display: flex;
}

#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

For center horizontally Just put

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

Another method:

#over img {
    display: inline-block;
    text-align: center;
}

For center vertically Just put:

   #over img {

           vertical-align: middle;
        }

SIMPLE. 2018. FlexBox. To Check Browser Support - Can I Use

Minimal Solution:

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}

To get the widest browser support possible:

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}

This worked for me:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}

This can also be done using the Flexbox layout:

STATIC SIZE

.parent {_x000D_
    display: flex;_x000D_
    height: 300px; /* Or whatever */_x000D_
    background-color: #000;_x000D_
}_x000D_
_x000D_
.child {_x000D_
    width: 100px;  /* Or whatever */_x000D_
    height: 100px; /* Or whatever */_x000D_
    margin: auto;  /* Magic! */_x000D_
}

<div class="parent">_x000D_
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>_x000D_
</div>

DYNAMIC SIZE

html, body {_x000D_
  width: 100%;_x000D_
  height: 100%;_x000D_
  display: flex;_x000D_
  background-color: #999;_x000D_
}_x000D_
_x000D_
* {_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
}_x000D_
_x000D_
.parent {_x000D_
  margin: auto;_x000D_
  background-color: #000;_x000D_
  display: flex;_x000D_
  height: 80%;_x000D_
  width: 80%;_x000D_
}_x000D_
_x000D_
.child {_x000D_
  margin: auto;  /* Magic! */_x000D_
  max-width: 100%;_x000D_
  max-height: 100%;_x000D_
}

<div class="parent">_x000D_
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>_x000D_
</div>

I found the example in this article, which does a great job explaining the how to use layout.

setting the img to display:inline-block while having set the superior div to text-align:center will do the job too

EDIT: to those folks who are playing with display:inline-block >>> don't forget that e.g. two divs like

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

really have no spaces between them (as seen here).

Just basic to avoid these (inline block inherent) gaps between them. These gaps can be seen between every two words I'm writing right now! :-) So .. hope this helps some of you.

this did the trick for me.

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

'Note: do not have a css class assocaited to 'BrandImage' in this case

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}

Well, we are in 2016... why not use flexbox? It's also responsive. Enjoy.

#over{_x000D_
display:flex;_x000D_
align-items:center;_x000D_
justify-content:center;_x000D_
}

<div id="over">_x000D_
 <img src="http://www.garcard.com/images/garcard_symbol.png">_x000D_
</div>

CSS File

.over {
    display : block;
    margin : 0px auto;

This should work.

IMPORTANT FOR TEST: To Run code snippet click left button RUN code snippet, then right link Full page

#fader{_x000D_
position:fixed;z-index: 10;_x000D_
top:0;right:0;bottom:0;left:0;_x000D_
opacity: 0.8;background: black;_x000D_
width:100%;height:100%;_x000D_
text-align: center;_x000D_
}_x000D_
.faders{display:inline-block;height:100%;vertical-align:middle;}_x000D_
.faderi{display:inline-block;vertical-align:middle;}

<div id="fader">_x000D_
<span class="faders"></span>_x000D_
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />_x000D_
</div>

Daaawx's answer works, but I think it would be cleaner if we eliminate the inline css.

body {_x000D_
 margin: 0;_x000D_
}_x000D_
_x000D_
#over img {_x000D_
 margin-left: auto;_x000D_
 margin-right: auto;_x000D_
 display: block;_x000D_
}_x000D_
div.example {_x000D_
  position: absolute;_x000D_
  width: 100%;_x000D_
  height: 100%;_x000D_
}

<div class="example" id="over">_x000D_
 <img src="http://www.garcard.com/images/garcard_symbol.png">_x000D_
</div>

I've tried many approaches but only this one works for multiple inline elements inside a container div. Here is code to align everything in div at middle.

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

Sample code is here: https://jsfiddle.net/yogendrasinh/2vq0c68m/

You can take a look on this solution:

Centering horizontally and vertically an image in a box

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

Try this minimal code:

<div class="outer">
    <img src="image.png"/>
</div>

And CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

HTML:

<div id="over">
    <img src="img.png">
</div>

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}

many answer suggests to use margin:0 auto but this works only when the element you trying to make centered is not floating on left or right, that is float css attribute isn't set. In order to do this apply display attribute to table-cell and then apply margin of left and right to auto so your style will look like style="display:table-cell;margin:0 auto;"

I still had some issues with other solution presented here. Finally this worked best for me:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

css3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

You can read more about that approach at this page.

    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

Use bootstraps align-items and justify-content. See example below:

<div class="well" style="align-items:center;justify-content:center;">
    <img src="img_source" height="50px" width="50px"/>
</div>

body {_x000D_
  margin: 0;_x000D_
}_x000D_
_x000D_
#over img {_x000D_
  margin-left: auto;_x000D_
  margin-right: auto;_x000D_
  display: block;_x000D_
}

<div id="over" style="position:absolute; width:100%; height:100%">_x000D_
  <img src="http://www.garcard.com/images/garcard_symbol.png">_x000D_
</div>

JSFiddle