How to Vertically Center Align a Position:Relative Element

How do I vertically center align a position:relative element?

One solution is to wrap your .container with two wrappers; give the first one display: table; and height: 100%; width: 100%; and the second display: table-cell; and vertical-align: middle;. Also make sure your body and html have full height.

Here's a little working demo: little link.

Another method is to apply top: 50%; to your .container and margin-top: -150px; (300px / 2 = 150px). (Note that this method requires you to know the exact height of your container, so it might not be exactly what you want, but it might as well be!). A little working demo of this latter method: another little link.

I hope that helped!

Is it possible to vertically center a relatively positioned element?

position:relative does not take an element out of the flow, it just allows you to change its render location relative to where it would've been rendered had it not been positioned.

position:absolute takes an element out of the document flow. This causes the elements origin to be the upper left of the nearest ancestor element that is not position:static.

If you need to set your particular element to position:relative, but need its initial position to be centered in its parent, add a wrapper element and move the centering to that wrapper.

.header-main-left {

    float: left;

    height: 95px;

    position: relative;

}

.header-main-left .logo-wrapper {

    position:absolute;

    top:50%;

    height:100%; /* let the relative top and transform on the img work */

}

.header-main-left img {

    position: relative; /* I want this to be position relative */

    top:50%;

    transform: translateY(-50%);

}

<div class="header-main-left">

  <div class="logo-wrapper">

    <img src="/images/header_logo.png" >

  </div>

</div>

Vertical centering with `position: relative` and `top: 50%`

First, you should use absolute positioning, with the .grid set to relative positioning. Then, set top, bottom, left, and right to 0 on the .spinner element. Since you have a fixed width/height, the positioning along with margin:auto; will center the element perfectly (example):

.grid {
    position:relative;
}
.spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    height: 3px;
    width: 3px;
    background-color: red;
}

table {
    width: 100%;
}

In response to your note at the end, no, it's not possible with static positioning of the .grid element (unless you add a wrapper within the .grid element). This is because the .spinner element has no way of knowing the height dimensions of the table without having a container of some sort with relative positioning (which is where position:relative; on the .grid element comes in to play). You can work around this with negative margins or relative positioning all you want, but it will never be able to accommodate dynamic content (with the current set of browsers/standards).

Css vertically center explained

position: absolute takes an element out of the document flow and lets you position it in relation to the next higher ancestor which has position: relative, usually (and intentionally) overlapping other elements (for example text over an image).

top: 50% moves the top of the absolutely positioned element 50% down, i.e. half of the parent's height. That way the top border of the child element will be at the exact center of the parent.

transform: translateY(-50%); moves the absolutely positioned element 50% up, but this time 50% of its own height, above the vertical center of the parent element, resulting in exact vertical centering inside the parent.

All this only works if the parent has position: relative, so it can serve as a position anchor for the absolutely positioned child.

The same goes for horizontal centering, using left: 50% and transform: translateX(-50%);

Combined (i.e. horizontally and vertically) that would be top: 50%; left: 50% and transform: translate(-50%, -50%);

How to vertically align into the center of the content of a div with defined width/height?

I have researched this a little and from what I have found you have four options:

Version 1: Parent div with display as table-cell

If you do not mind using the display:table-cell on your parent div, you can use of the following options:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Live DEMO

---

Version 2: Parent div with display block and content display table-cell

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Live DEMO

---

Version 3: Parent div floating and content div as display table-cell

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Live DEMO

---

Version 4: Parent div position relative with content position absolute

The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Live DEMO

Positioning a div relative to its vertical centre

In the snippet bellow I have two elements, both set to position:absolute with top: 25% and left: 50% .

• .element as transform: translate(-50%, -50%); that allows him to center vertically and horizontally "exactly" at 25% of the page dimensions (height, width). Because unlike top and left, the transform property is based on the size of the target element. So the percentage you set refers to the size of the bounding box of the target.
• .other in the other hand doesn't have a transform rule so it's not positioned like you wanted it to be, its top border sits at 25%

.element,

.other {

  position: absolute;

  text-align: center;

  top: 25%;

  left: 50%;

}

.element {

  transform: translate(-50%, -50%);

  color: green;

}

.other {

  color: red;

}

html,body{

  height:100%;

  margin:0;

  padding:0;

}

<div class="element">I'm at 25% middle</div>

<div class="other">I'm not at 25% middle</div>

Vertically centering, absolute position, multiple elements

Make the children inline-block and use vertical-align:middle. No need for positioning.

a {

  vertical-align: middle;

  display: inline-block;

}

.parent-container {

  text-align: center;

  background:palegoldenrod

}

<div class="parent-container">

  <a href="">Some content</a>

  <a href="">

    <img src="http://www.fillmurray.com/140/100">

  </a>

</div>

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