Center website in borwser on any resolution

Posted on 2009-02-11
Last Modified: 2012-05-06
I am designing a website and would like the complete content of the website to be centered no matter what resolution the monitor is set to. I have been able to center it horizontally, but unable to vertically. EX: when I set screen to a high resolution, the content will be centered horizontally, but will still be located at the top of the browser.

Here is my current code.

<style type="text/css">
html, body, #wrapper {margin:5;padding:0;height:100%;text-align:center;}
#wrapper {margin:5 auto;vertical-align:middle;width:250px;}
<body onload="preloadImages();" bgcolor="#000000"><table id="wrapper"><!-- ImageReady Slices (website.psd) --></table>

Please let me know what code I can use to accomplish my goal.

Question by:jfilmore3
    LVL 2

    Expert Comment

    The simplest way would be to change it as below:

    For more advanced, more current methods, see:
    <style type="text/css">
    html, body, #wrapper {margin:5;padding:0;height:100%;text-align:center;}
    #wrapper {margin:5 auto;vertical-align:middle;width:250px;}
    <body onload="preloadImages();" bgcolor="#000000"><center><table id="wrapper"><!-- ImageReady Slices (website.psd) --></table></center>

    Open in new window

    LVL 27

    Expert Comment

    by:Lukasz Chmielewski
    this comes from another page but try it

    of course the main page should contain
    <div id="main">
    margin-top:	0px;	
    margin-left: 0px;	
    margin-right: 0px;	
    margin-bottom: 0px;	
    font-family: Tahoma, Arial, Helvetica, sans-serif;	
    font-size: 9pt;	
    background-color: black; 
    width: 100%;
    height: 100%;
    	position: absolute;
    	left: 50%;
    	margin-top: -250px; /* make this half your image/element height */
    	margin-left: -450px; /* make this half your image/element width */
    	height: 500px;
    	width: 900px;
    	display: table;
    	vertical-align: middle;
    	border: 1px solid #7D5700;

    Open in new window

    LVL 2

    Accepted Solution


    Mis-read your question initially. To center Vertically, you place in in a table cell, and center that cell vertically, see below for more info:

    Alternatly you could "Use a negative margin that is half the table height then relatively position the table 50% from the top of the viewport:

    table {position: relative; height: 500px; top: 50%; margin-top: -250px;} "
    LVL 9

    Expert Comment

    you are using margin and padding in your css thats y its start at the top. take those out and insert  vertical-align: middle;

    Featured Post

    Live: Real-Time Solutions, Start Here

    Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

    Join & Write a Comment

    This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
    When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure ( It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
    In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now