Search code examples
htmlcssimagewebcenter

How can I perfectly center my image?

So I have an image on my website and I want to perfectly center it. I have tried many things but none have worked.

body{
background-color: black;
}

img {
  position: absolute;
  margin-top: 10%;
  text-align: center;
  height: 40%;
  z-index: -5
}
<img src="images/astronaut.png">

Solution

  • Like this?

    body{
background-color: black;
}

img {
  position: absolute;
  margin-top: 10%;
  text-align: center;
  height: 40%;
  z-index: -5;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
}
    <img src="images/astronaut.png">

    The centering codes are the left, top, and especially the transform