Centering A Website Horizontally And Vertically

November 02, 2022 Post a Comment

view on http://www.eveo.org download site for easy modification: http://www.eveo.org/backup/eveo.rar http://www.eveo.org/backup/eveo.zip As you can see right now, it is centered h

Solution 1:

There are some cross-browser solutions that don't require Javascript or hacking.

One good example is here

Have a look also on this one.

For some learning, check this excellent example of gtalbot about horizonal align in CSS.

good luck >)

Solution 2:

HTML

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

CSS

div#container { 
    width: 200px;
    height: 200px;
    margin-left: -100px; /* Half of width */
    margin-top: -100px; /* Half of height */
    position: absolute; left: 50%; top: 50%;
}

Solution 3:

You can do this with CSS/HTML, but the method I'm going to use will work best if your height is known, or you can use JavaScript to grab the height.

Baca Juga

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Centered Page</title>
    </head>

    <body>
        <div class="container">

            <!-- My Content will be 500px tall -->

        </div>
    </body>
</html>

CSS:

.container { height:500px; margin:-250px /* Half the height container */ auto; position:absolute; top:50%; width:960px; }

JavaScript (jQuery): If you don't know the height or if it changes.

(function() {

    var $container = $('.container'),
        height = $container.outerHeight();

    $container.css({
        'marginTop': (height/2) * -1
    });

})();

Solution 4:

There is an easy way to center a page using just CSS using inline-blocks: http://jsfiddle.net/CUd8G/

It works when there are a very little content: http://jsfiddle.net/CUd8G/1/
When there are a lot of content: http://jsfiddle.net/CUd8G/2/
With fixed width (however, it works with unknown width/height): http://jsfiddle.net/CUd8G/3/

Solution 5:

This is the minimum you need to do it in only html and css without javascript

<!doctype html><html><head><style>

   table.inner{width:100%;}
   table.outer{text-align:center; width:100%; height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px;}

</style></head><body>


   <table class='outer' cellspacing='0px' cellpadding='0px'><tr><td></td></tr><tr><td>
   <table class='inner'  cellspacing='0px' cellpadding='0px'><tr><td></td></tr><tr><td>

         INSPIRATIONAL
         CELEBRATIONAL
         MUPPETATIONAL

   </td></tr><tr><td></td></tr></table>
   </td></tr><tr><td></td></tr></table>

</body></html>

Build Html5