How to keep an image centered and responsive?

Question

I have an image, centered both, horizontally and vertically

#logo01{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-146px;  // half of height
    margin-left:-229px;  // half of width
    cursor:pointer;
}

Now I need a responsive design, so:

#logo01{
    max-width:45%;
    max-height:45%;
}

It works, but position is lost. How can I keep the image centered and responsive at the same time ?

Answer 1

This is a dirty way around:

JSFiddle

<div class="shadow"><img class="logo" src="http://placehold.it/1000x1000" /></div>

div.shadow {
    position:absolute;
    max-width:45%;
    max-height:45%;
    top:50%;
    left:50%;
    overflow:visible;
}
img.logo {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-50%;
    margin-left:-50%;
}

The trick is to use div.shadow as a "dimension holder", so percentage can work.

I call it dirty because the shadow div still possess some space, which will prevent mouse from pointing things underneath it. You can use pointer event to get around that, but then IE will be left behind, and the image itself would not be pointerble either.

Answer 2

Try with below css for the container for the image.

CSS:

width: 100%; text-align: center; margin-top:50%

Answer 3

try this

http://jsfiddle.net/hAH6u/2/

#logo01{
    position:absolute;
    top:50%;
    left:50%;   
    cursor:pointer;
    max-width:45%;
    max-height:45%;
    display:table;
} 

Answer 4

Using table display:

CSS

img {
    max-width: 100%;
    height: auto;
    display: table;
    margin: 0 auto;
}

http://jsfiddle.net/herbowicz/a5kumqtv/5/

Answer 5

Below is my suggestion. It works for any <div> <img> and ...

<div class="parent"> 

    <img class="responsive center" src="http://placekitten.com/800/600">

</div>

and the css code is:

.responsive{
   max-width:100%;
   max-height:100%;
 }

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

.parent{
  position: relative;
}

just find and test a live demo here: https://jsfiddle.net/veuodbk7/2/

Answer 6

You can make use of display:table and display:table-cell property to achieve this.

HTML:

<div id='logo_container'>
    <h1 id='logo'><img src = 'http://s18.postimg.org/rwpoh1vo9/forbidden.jpg' alt = 'Logo'/></h1>
</div>

CSS

#logo_container {
    display:table;
    height:100px;
    width:100px;
    margin:0 auto;   
    text-align:center;
    border:1px solid #333;
}

#logo {
    display:table-cell;
    vertical-align:middle;

}
#logo img {
    max-height:80%;
    max-width:80%;
}

Here is the fiddle: http://jsfiddle.net/Qe2vG/

You can see that image is aligned central vertically. Also in case of responsive style, just change the height and width value of #logo_container

Answer 7

This solution might work just fine :

 img { max-height: 100%; max-width: 90%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

Answer 8

Since most modern browsers support CSS grid now, I used CSS grid. I know this is an old post but for anyone in the future that doesn't know about CSS grid you should look into it, it's very helpful.

Anyway, here's my solution:

Create a div around the image and give it a class name so your HTML looks like this:

<div class="center-image">
  <img src=.... >
</div>

Then in your CSS add this:

.center-image {
  display: grid;
  justify-items: center;
}

Your image should be centered (horizontally). If you want it centered vertically too just add:

align-items: center;

to your div styling like this:

.center-image {
  display: grid;
  justify-items: center;
  align-items: center;
}