Oct 12

Web Design: Center a Div Horizontally and Vertically

gonz
Gonzalo Carrillo

This seems to be a reoccurring issue with new web designers and intermediate web designers alike. Not only will I provide you the answer to this problem with some simple css but also provide you with a jquery option that allows you to center divs without needing to declare widths or heights!

 Horizontal Centering

Simple. You need to know the width of the div and set the left and right margin’s to auto.

1
2
3
4
5
.className {          // the class assigned to your div
    margin:0 auto;    // 'auto' applied to the left and right margin centers the div horizontally
    width:100px;      // The width of the div
    height:100px;     // The height of the div
}

 Horizontal & Vertical Centering

This is a bit harder, mainly because you need to know the dimensions of the div. By positioning the div absolutely, we are able to place the div relative to the browser window. offsetting the div by 50% to the left and top positions centers the top left point of the div. By giving the div a negative margin of HALF the divs width and height, we are able to perfectly center the div on your browser.

1
2
3
4
5
6
7
8
.className {                  // the class assigned to the div
    width:200px;              // the width of the div
    height:100px;             // the height of the div
    position:absolute;        // positions the div relative to it's ancestor element
    left:50%;                 // sets the left edge of the div to exactly 50% of the browser window
    top:50%;                  // sets the top edge of the div to exactly 50% of the browser window
    margin:-50px 0 0 -100px;  // sets the margins to minus HALF of the div's width and height, perfectly centering the div
}

Horizontal & Vertical Centering with jQuery

Jquery is the future of web design. It is much easier and less time consuming to have a pre written jQuery script that automatically resizes a div. the $(window).resize() statement executes every time the browser window is resized. outerWidth() and outerHeight() take the total complete width and height of an element (including paddings and margins). the only downfall, of course, would be that this will not work if a browser does not have javascript enabled. However, this is the very best option for designing rich interfaces.

1
2
3
4
5
6
7
8
9
$(window).resize(function(){                                          // creates a resize function tied to the browser window
    $('.className').css({                                             // creates a css handler for any element with the class 'className'
        position:'absolute',                                          // positions the element relative to it's ancestor element
        left: ($(window).width() - $('.className').outerWidth())/2,   // takes the width of the window and subtracts the element's total width divided by 2 and centers horizontally.
        top: ($(window).height() - $('.className').outerHeight())/2   // takes the height of the window and subtracts the element's total height divided by 2 and centers horizontally.
    });
});
 
$(window).resize(); //executes the function on page load

Note: Make sure to place the jquery source code in your head tag in order for this and any jquery to function.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>

Gonzalo Carrillo is a web designer for Websoul. To view further information and helpful tips about web design, view his blog at Gonz’s Websoul Blog

Leave a Reply