Центрируйте абсолютный div под его родителем, используя проценты, а не абсолютные значения

Question

Этот , этот и этот вопрос были похожи, но не помогли.

Цель состоит в том, чтобы центрировать элемент под егородитель, используя проценты, а не абсолютные значения.Таким образом, значения положения не должны изменяться при изменении размеров.

Элемент hover ниже центрируется под outer, но позиционирование требует абсолютных значений, которые зависят от размеров hover и outer.При любом изменении значения позиции должны измениться.

Можно ли добиться центрирования под родительским элементом в процентах?

Codepen: https://codepen.io/anon/pen/dadjpg

<div id="outer">
  <div id="hover"></div>
</div>

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  position: absolute;
  margin: auto;
  left: 75px;
  bottom: -50px;
}

Answer 1

Вы также можете использовать top:100%; left:0px; right:0px; margin:0px auto;

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  position: absolute;
  left:0px;
  right:0px;
  top:100%;
  margin:0px auto;
}

<div id="outer">
  <div id="hover"></div>
</div>

Answer 2

Вы можете использовать top:100%, чтобы переместить элемент вниз, а затем просто объединить left:50% с translateX(-50%) в центр:

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  top:100%;
}

<div id="outer">
  <div id="hover"></div>
</div>

Та же логика с учетом bottom:0

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  position: absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%,100%);
}

<div id="outer">
  <div id="hover"></div>
</div>

Другая идея заключается в том, чтобы считать flexbox центром в элементе, а затем перевести его, чтобы сделать элемент снаружи:

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
  display:flex;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  margin:auto auto 0;
  transform:translateY(100%);
}

<div id="outer">
  <div id="hover"></div>
</div>