CODEWITHSUNDEEP
htmlcsscentering
ruudy
ruudy

Reputation: 491

Vertical center on a div not working

From start i search for long time solutions and similar questions on stackoverflow, but no one works for me.

Here is a jsFiddle: http://jsfiddle.net/ruudy/MJe3H/

I want to center material-container verticaly, it works only horizontaly.

I tried different solutions like:

top: 0px;
bottom: 0px;
margin: auto;

display: -moz-box;
-moz-box-align: center;
display: -webkit-box;
-webkit-box-align: center;
display: box;
box-align: center;

display: table-cell;
vertical-align: center;

I try to see if a parent div make the vertical center not work but dont find any clue.

Thanks in advance.

PD: Must be a simple thing but i dont find it.

Upvotes: 0

Views: 109

Answers (3)

Guern
Guern

Reputation: 1267

Have a look at this site on vertical center objects, it has been very useful for me.

vertical-centering-with-css

Upvotes: 1

Danield
Danield

Reputation: 125561

Try using the css-tables technique to vertically center.

See this LIVE DEMO

More about the the different techniques in this post.

Upvotes: 1

Merec
Merec

Reputation: 2761

You can align a container vertical only when it has a known height with a CSS trick.

Set the container absolute with a top position of 50% and then add a negative margin of the half size from the container.

.parent_container {
    position: relative;
}

.container {
    height: 500px;
    position: absolute;
    top: 50%;
    margin-top: -250px;
}

Upvotes: 1

Related Questions