Relative Parent, Absolute Positioning Vertically by Percentage

Relative parent, absolute positioning vertically by percentage?

The absolutely positioned element is taken out of the natural flow of the document which means your container has zero height and width.

10% and 50% of that zero height and width are, of course, zero.

If you give your container a height and width, your percentage positions will start to work as you want.

Here is a working example.

.container { position: relative; width:500px; height:500px; } 

Position a div in percentage relative to parent div

You can use transform property:

.fish {
      height: 320px;
      width: 300px;
      position: absolute;
      transform-origin: center; // Here I am trying to set the origin of the div in its center.
      top: 50%;  // And here I am trying to center vertically the child div in the parent div.
      left: 50%; // Same here but horizontally
      transform: translate(-50%, -50%);
      z-index: 10000;
      background-color: #10121b;
    }

Or you can also make your parent div flex and use flex-wrap: wrap; justify-content:center; and align-items:center; without making child absolute

Bug when using absolute position and percentages to vertically center child div

Height and top percentages are relative to the height of their containing block - i.e. the div with class "container". The containing block's height is determined by the height of the div with class "pretendImage".

Width, left and margin-left percentages are relative to the width of their containing block - i.e. the div with class "container". The containing block's width is determined as a percentage of its containing block, which in the jsfiddle case is the initial containing block, which is itself the same as the width of the viewport. This is not how you are calculating the percentages you think you need. You can handle this by shrink wrapping the element which is position:relative (use display:inline-block; or float:left;) and create another wrapper div outside that to space out the elements in the viewport.

The weird one is the margin-top (and margin-bottom) percentages. These are relative to the width of the container block. This is not helpful, and there's little that can be done about this unless the containing block has a known and fixed aspect ratio, in which case you could calculate the percentage value of the height needed from the width and the aspect ratio.

No idea what Safari is doing, but it sounds seriously buggy.

Absolute positioning with percentages giving unexpected results

The absolute positioning is applied relative to the next parent element whose position is not static. In your case, that's the full page. Try setting position: relative on the container division.

See the jsFiddle.

See: W3C - 10.1 - Definition of "containing block"

Center absolute div under its parent using percentages not absolute values

You can also use 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>

Vertically centered absolute position div inside relative position parent - Works in Chrome, but centers to body in Safari etc?

I edited your jsbin: http://jsbin.com/iceroq/3

The edits were all CSS changes to .content-text a. Making the link absolutely positioned and giving it a height allows you to know what margin-top to give it (half of the height).

.content-text a {
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  color: white; 
}

How to center div vertically inside of absolutely positioned parent div

First of all note that vertical-align is only applicable to table cells and inline-level elements.

There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I'll show you two methods from my favorites:

1. Using transform and top

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

---

Related Topics