0

Given

  .parent {
    display: flex;
    justify-content: center; 
    align-items: center;
  }

In the snippet below, the absolutely positioned child is centered:

.parent, .child {
  border-radius: 0.25rem;
}
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 10rem;
  background-color: #eee;
}
.child {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #444;
}
<div class='parent'>
  <div class='child'></div>
</div>

However in the following example this isn't the case for the h1 which is a direct child of a flex parent. The only meaningful difference I can think of is the padding on it's parent. My question is how can padding of the parent effect an absolutely positioned child? - if this is the case?

Given that absolutely positioned children are removed from the normal flow of the document.

* {
  box-sizing: border-box; margin: 0; padding: 0;
}
html, body {
  height: 100%;
}
html {
  transform: scale( 0.45);
}
body, .parent {
  display: flex;
  justify-content: center; align-items: center;
  padding: 4rem;
  font-family: Arial;
  color: #444;
}
.wrap {
  border-radius: 1rem;
  width: 100%;
  padding: 2rem;
  background-color: #eee;
}
.parent, h1 {
  position: relative;
  border-radius: 0.5rem;
  padding-top: 50%;
  background-color: #ddd;
}
h1 {
  position: absolute;
  padding: 1rem;
  background-color: #fff;
}
<div class='wrap'>
  <div class='parent'>
    <h1>heading</h1>
  </div>
</div>

Why isn't the h1 above vertically centered?

Lynel Hudson
  • 2,335
  • 1
  • 18
  • 34
  • never rely on the default position of absolute, always spectify the position using top/left/right/bottom to make sure it's located where *you* want – Temani Afif May 23 '21 at 21:17
  • When you remove the `position: absolute` from the `

    `, does it behave as you'd like it to?

     – Eyal May 23 '21 at 21:19
  • 1
    Your problem is that you are applying to both `.parent` and `h1` the same `padding-top:50%`, this forces `.parent` to push it's children to the bottom. It has nothing to do with `position:absolute`. Try as a test to remove `padding-top` and add a `min-height:400px` to your `.parent`. Absolute, when not given any explicit positioning, just stays where it would be as if relative, only outside the normal flow – Ant May 23 '21 at 21:20
  • @EyalC no when `position: absolute` is removed from the `h1` the `h1` stays unmoved in the same position. As if the padding is pushing it down despite being absolutely positioned. – Lynel Hudson May 23 '21 at 21:25
  • @Ant that can't be the problem because `h1 { padding: 1rem }` in the last rule overwrites the `padding-top: 50%` applied earlier. – Lynel Hudson May 23 '21 at 21:26
  • 1
    It overwrites the padding of the `h1`, not of `.parent`. It's `.parent` who is pushing everything down – Ant May 23 '21 at 21:27
  • @devsandbox Exactly! When you're adding `position: absolute`, imagine that you remove the element from the flow of the document but it stays in the same place above it's original spot. – Eyal May 23 '21 at 21:27

0 Answers0