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 hei         


        

Answer 1

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:

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;
}