CODEWITHSUNDEEP
csspositioncss-position
user1452062
user1452062

Reputation: 805

How to center an absolute positioned item vertically?

I would like to align an absolute positioned div. Top:50%, bottom:50% not working, what's the solution for this?

CSS

#container {
    position:relative;
    background:red;
    width:600px;
    height:600px;
}

#cen {
    position:absolute;
    width:300px;
    height:300px;
    background:grey;
    top:50%;
    bottom:50%;
}

HTML

<div id="container">
    <div id="cen"></div>
</div>

http://jsfiddle.net/2xq5F/

Upvotes: 1

Views: 1118

Answers (5)

sicks
sicks

Reputation: 767

I'm not sure what you need it to be absolutely positioned for, but if you trick CSS into thinking your container is a table-cell, you can use the vertical-align property for a fully dynamic layout.

#container {
    position:relative;
    background:red;
    width:100px;
    height:200px;
    display: table-cell;
    vertical-align: middle;
}

#cen {
    width:100px;
    height:20px;
    background:grey;
}

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

You can also do it this way:

#cen {
    position:absolute;
    width:150px;
    height:150px;
    background:grey;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin: auto;
}

Demo at: http://jsfiddle.net/audetwebdesign/EBmy3/

Big advantage, no math required.

However, this works because you specified width and height. This gets trickier when you use percentages.

Note: I made the blocks half the size so they fit in the fiddle window... will also work with the larger blocks.

Works Well With Replaced Elements

This technique does a pretty good job if you are positioning an image, which has specific dimensions (though you may not know them).

See example in fiddle.

Upvotes: 2

nick
nick

Reputation: 610

Vertical alignment is based off of other inline elements. The best way I've found to vertically align something is to add a psuedo class.

It's easy to vertically align something if you know the dimensions, like some of the other answers have noted. It makes it harder though, when you don't have specific dimensions and needs to be more free.

Basically, the method aligns the psuedo class with the rest of the content to align middle whatever is inside the container.

div#container {
  width: 600px;
  height: 600px;
  text-align:center;
}
div#container:before {
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
div#cen {
  display:inline-block;
  vertical-align:middle;
}

Upvotes: 1

Oswaldo Acauan
Oswaldo Acauan

Reputation: 2740

To center something vertically, you need do add a top: 50% and a negative margin-top: -(elementHeight/2).

In your case it will be

#cen {
    position:absolute;
    width:300px;
    height:300px;
    background:grey;
    top:50%;
    margin-top: -150px;
}

Upvotes: 3

Finbarr
Finbarr

Reputation: 32126

If those are the real measurements, why not just do this?

#cen {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 150px;
    background:grey;
}

Upvotes: 0

Related Questions