Vertical positioning inside a min-height container

Question

Recently discovered that a relative positioned element inside a container with "min-height" defined but no "height" can't be positioned vertically, only horizontally. ¿Am I wrong? ¿Is there a reason for that? ¿Workarounds? Edit: The case is a % min-height; Here is the example:

<div style="position:relative; width:100%; min-height:100%; background-color:pink;">
        <div style="position:relative; top:30%; left:30%; width:700px; height:500px; background-color:yellow;"></div>

The "top:30%" is ignored

duplicate of : https://stackoverflow.com/questions/28238042/setting-css-top-percent-not-working-as-expected — Temani Afif, Oct 24 '18 at 09:30
duplicate of : https://stackoverflow.com/questions/1622027/percentage-height-html-5-css — Temani Afif, Oct 24 '18 at 09:30
duplicate of : https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Temani Afif, Oct 24 '18 at 09:31
None of the duplicates really solves the problem in my case, or gives a good enough explanation, since i don't try to give size to the contained object based on the container. — user6846020, Oct 24 '18 at 09:52
the duplicates aren't solving your issue but explaining why you have an issue .. you need to understand why top is not working (which is explained in the duplicate) in order to understand your issue and think about how to fix it — Temani Afif, Oct 24 '18 at 10:18

score -1 · Answer 1 · answered Oct 24 '18 at 09:07

-1

Yes you can, you can use flexbox to center your relative div inside of your container.

<div class="container">
  <div class="center"></div>
</div>

.container {
  min-height: 300px;
  background-color: red;
  display: flex;
}

.center {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: auto;
  position: relative;
}

answered Oct 24 '18 at 09:07

Roy

23
5

Doesn't work for me, I guess it's the % min-height that is the problem, but can't imagine why – user6846020 Oct 24 '18 at 09:28
My answer is a workaround I think you should use to accomplish what you're trying to do. If you're trying to get "top: 30%" to be included, you should make the centered div "position: absolute" and the container div "position: relative". Also: Your container div is 100% min-height. So it'll adapt to the content. – Roy Oct 24 '18 at 09:33
I need the centered div to be "relative" for other purpose, if it could be "absolute" it would work fine. – user6846020 Oct 24 '18 at 09:38

Vertical positioning inside a min-height container

1 Answers1