Align element horizontally and vertically to the center of the page

Question

It's been long time that I don't make a website and I can't remember how to align vertically a div in a proper way. I checked many online resources and also stackoverflow questions but nothing helped or at least I didn't see where my mistake is.

I created a text that at the beginning is hidden and after some time appears and scales getting bigger using jQuery. It seems to work and it is centered horizontally but not vertically. How to align it vertically to the center of the page?

HTML

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link href="main.css" rel="stylesheet" />
<title>Homepage</title>
<script src="jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="container" align="center">
<p id="robo">ROBO</p>
</div>
<script>
$(document).ready(function() {
    $("#robo").delay(500).fadeIn(500).animate({fontSize: "3em"}, 1000);
}); 
</script>

</body>
</html>

CSS

*{
    margin: 0px;
    padding: 0px;
}
body {
    text-align: center;
    width: 100%;
}
#container {
    width: 1024px;
    height: 768px;
    margin: 0 auto;
}
#robo {
  display:none;
  width:200px;
  height:200px;
}

JSFiddle Example: http://jsfiddle.net/sMrL9/

Did you search at all? Using your title: http://stackoverflow.com/search?q=Align+element+horizontally+and+vertically+to+the+center+of+the+page — JSuar, Jan 04 '14 at 15:30
Yes I searched. I said that using some answers already given on stackoverflow I couldn't solve the problem. Probably there's something wrong that I can't see at the moment. If someone can help me to fix it I'd appreciate it. — Fabio, Jan 04 '14 at 15:31

score 5 · Accepted Answer · edited May 23 '17 at 11:46

Using CSS

The link below provides five methods for vertical centering, the pros and cons of each, and how to implement each one. I recommend reviewing the page.

http://www.vanseodesign.com/css/vertical-centering/

Using jQuery

This SO answer provides a dynamic jQuery solution.

Working Fiddle: http://jsfiddle.net/sMrL9/1/

jQuery.fn.verticalAlign = function ()
{
    return this
            .css("margin-top",($(this).parent()
            .height() - $(this).height())/2 + 'px' )
};

$(document).ready(function() {
    $("#robo").delay(500)
              .fadeIn(500)
              .animate({fontSize: "3em"}, 1000)
              .verticalAlign();
});

Other possible solutions:

Centering a div vertically & horizontally using jQuery
How do I vertical center text next to an image in html/css?

http://atomiku.com/2012/02/simple-jquery-plugin-for-vertically-centering/

(function ($) {
        // VERTICALLY ALIGN FUNCTION
        $.fn.vAlign = function() {
            return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = Math.ceil((ph-ah) / 2);
            $(this).css('margin-top', mh);
            });
        };
    })(jQuery);
Then you can use $(‘.classname’).vAlign(); or $(‘#image’).vAlign(); – Make sure to use this once the document has loaded, within $(document).ready(function(){})!

Thanks, the solution with jquery works. I'd prefer a solution with CSS only, without using javascript/jquery for vertical alignement to the center of the page. The "vertical-align:middle;" property doesn't seem to work, I tried before. — Fabio, Jan 04 '14 at 15:56
You're already using jQuery so not sure why go through the pain of not using CSS only. I'll attempt to create a CSS solution only. Also, [vertical-align](http://css-tricks.com/what-is-vertical-align/) doesn't work like you think. I recommended reading up on it. — JSuar, Jan 04 '14 at 15:59
@Fabio let me know if you still can't get the CSS solutions to work. — JSuar, Jan 04 '14 at 16:16

Align element horizontally and vertically to the center of the page

1 Answers1

Using CSS

Using jQuery