Center content in a absolute positioned div

Question

I have an absolutly positioned element with content inside. It can be a <h1> or a few <p> tag. So I don't know the height of the content.

How can I vertically center the content inside the absolutly positioned div?

HTML :

<div id="absolute">
    <div class="centerd">
    <h1>helo</h1>
    <span>hi again</span>
    </div>
</div>   

CSS :

#absolute {
    position:absolute;
    top:10px;
    left:10px;
    width:50%;
    height:50%;
    background:yellow;
}

.centerd {
    display:table-cell;
    vertical-align:middle;
}

Fiddle

Leroi

Answer 1

if you add display:table to your #absolute div you should get what you want:

http://jsfiddle.net/3KTUM/2/

Idiophone

This doesn't center the content .. it just makes the content start from the center – Goldia

@ExplosionPills Seems to center the content for me - try adding more content in and you will see it stays vertically aligned, not start from the center. You may think it starts in the center as the h1 will have natural top padding which pushes it down – Idiophone

Answer 2

Horizontal and vertical position absolute middle.

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  -webkit-transform: translate(-50%, -50%);
}

<div class="obj">
  <div class="center">Test</div>
</div>

Bathsheba

the question was how can I vertically center the content inside the absolutely positioned div? the absolutely positioned div is .obj. your answer doesn't have position: absolute; on .obj, it doesn't work when it is applied, see this jsFIddle. – Longspur

Answer 3

This can be done with flexbox too:

#absolute {
  align-items: center;
  display: flex;
  justify-content: center;
}

Neoprene

Answer 4

Change your #absolute div to also use:

display:table;
vertical-align:middle;
text-align:center;

http://jsfiddle.net/3KTUM/4/

Sculpturesque

Answer 5

Just make the div relative to its absolute parent and use text-align: center, like this:

.centerd {
    position: relative;
    width: 100%;
    text-align: center;
    /*display:table-cell;
    vertical-align:middle;*/
}

See example fiddle

Signor

Your fix correctly shows how to align text elements horizontally, but the OP asked how to align things vertically. – Courson

Answer 6

use text-align:center or left:50%

Amaranthaceous