Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Method For Full-screen Vertically-centered HTML Page?

Post a Comment
I'm looking for a valid cross-browser solution for an HTML page which: Consumes 100% of the screen height, with no overflow (i.e. no scrolling) has a vertically (and horizontally)

Solution 1:

Depends on what you mean with "cross browser". Following works fine with all current, standards compatible ones (thus not IE6):

HTML:

<div id="a">
    <div id="b">
        <div id="content"></div>
    </div>
</div>

CSS:

html, body, #a {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#a {
    display: table;
}

#b {
    display: table-cell;
    margin: 0;
    padding: 0;

    text-align: center;
    vertical-align: middle;
}

#content {
    border: 5px solid red;
    width: 100px;
    height: 100px;
    margin: auto;
}

Live example:

http://jsfiddle.net/mGPmr/1/


Solution 2:

You could do something like this. It looks to work in IE6 as well:

<html> <head>

<script type="text/javascript"> </script>

<style type="text/css">

#container {    height: 100%;   width: 100%;    position: relative; }


#content {
    border: 5px solid red;
    width: 100px;
    height: 100px;
    position: relative;
    margin-left: -50px;
    margin-right: -50px;
    top: 50%;
    left: 50%; }


</style>


</head> <body>

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

</body> </html>

Solution 3:

Is simply not possible without JavaScript, at least not with CSS2 or earlier (not sure if CSS3 makes this possible, someone clarify on that).

The other provided answers require absolute width and height for the element; I assumed no such requirement. There's no way to center a flowing element vertically which is what you usually want, given that you don't know the aspect ratio of the browser window to reliably use fixed-size containers for content.


Post a Comment for "Method For Full-screen Vertically-centered HTML Page?"