Why isn't the png image centered within the parent div?

Question

I am trying to center a image within a container.

According to what I've understood, setting a container's position as "relative" that has a property of text-align set to center should center block-level elements vertically that has their position property set to absolute. However, why isn't this the case with my code?

.first-container {
  background-color: yellow;
  height: 100%;
  position: relative;
  text-align: center;
  width: 100%;
}

.mountain {
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Playground</title>
</head>

<body>
  <div class="first-container">
    <img class="mountain" src="images/mountain.png" alt="">
  </div>
  <div class="second-container">

  </div>
  <div class="third-container">

  </div>
</body>

</html>

I expected that the mountain image would be at the center of the first container that I set the background color to yellow for ease of distinction.

Obsidian Age · Accepted Answer · 2019-09-03T04:20:33.220

When you use position: absolute on an image in a container with position: relative, your image is at the center of your container. Or, more specifically, the top-left pixel of your image is as the center.

In order to center the image so that the center of the image is in the center of the containing element, you want to set a margin-left of negative half of the image's width. This can be seen in the following, with an image that's 100px wide, with margin-left: -50px:

.first-container {
  background-color: yellow;
  height: 100%;
  position: relative;
  text-align: center;
  width: 100%;
}

.mountain {
  position: absolute;
  margin-left: -50px;
}

<div class="first-container">
  <img class="mountain" src="https://placehold.it/100" alt="">
</div>

And assuming you set the width on the image itself, you can actually make use of a combination of CSS variables and calc() in order to determine this margin, with width: var(--image-width) and margin-left: calc(var(--image-width) / -2) on the image.

:root {
  --image-width: 100px;
}

.first-container {
  background-color: yellow;
  height: 100%;
  position: relative;
  text-align: center;
  width: 100%;
}

.mountain {
  position: absolute;
  width: var(--image-width);
  margin-left: calc(var(--image-width) / -2);
}

<div class="first-container">
  <img class="mountain" src="https://placehold.it/100" alt="">
</div>

score -1 · Answer 2 · answered Sep 03 '19 at 04:24

your code is right but has a little bit bug here, you need to set height property to some pixels then you can see the image. For example:

.first-container {
background-color: yellow;
height: 400px;
position: relative;
text-align: center;
width: 100%;
border: 1px solid black;
}

score -1 · Answer 3 · answered Sep 03 '19 at 04:51

added

left: 50%;
transform: translateX(-50%);

to .mountain. Hope this helps you. Thanks

.first-container {
  background-color: yellow;
  height: 100%;
  position: relative;
  width: 100%;
}

.mountain {
left: 50%;
transform: translateX(-50%);
  position: absolute;
  height: 100px;
  width: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Playground</title>
</head>

<body>
  <div class="first-container">
    <img class="mountain"src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Artesonraju3.jpg" alt="">
  </div>
  <div class="second-container">

  </div>
  <div class="third-container">

  </div>
</body>

</html>

Why isn't the png image centered within the parent div?

3 Answers3