CSS - Centering a Page - Then Making The Page 100% Height

Vertically center text in a 100% height div?

This answer is no longer the best answer ... see the flexbox answer below instead!

To get it perfectly centered (as mentioned in david's answer) you need to add a negative top margin. If you know (or force) there to only be a single line of text, you can use:

margin-top: -0.5em;

for example:

http://jsfiddle.net/45MHk/623/

//CSS:
html, body, div {
    height: 100%;
}

#parent
{
    position:relative;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
}

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

The originally accepted answer will not vertically center on the middle of the text (it centers based on the top of the text). So, if you parent is not very tall, it will not look centered at all, for example:

http://jsfiddle.net/45MHk/

//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
} 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

Positioning image horizontally center and make height 100% of viewport

Simply add left:0;right:0;margin:0 auto; to img.bg (example):

body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#main{
    margin: auto;
}

img.bg {
    /* Set rules to fill background */
    max-height: 100%;

    /* Set up proportionate scaling */
    height: auto;

    /* Set up positioning */
    position: fixed;

    /* Align horizontally */
    left:0;
    right:0;
    margin:0 auto;   
}

Alternative Solution

If you want the image to never be cut off (horizontally or vertically), and always centered, try this code instead (from https://stackoverflow.com/a/6284195/526741):

<img class="absoluteCenter" src="PATHTOIMAGE">

/* Don't Change - Positioning */
.absoluteCenter {
 margin:auto;
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
}

/* Sizing */
img.absoluteCenter {
 max-height:100%;
 max-width:100%;
}

Wide image
Tall image
Small image

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

Vertically center a content area until it reaches a certain height?

My solution takes into account that you want your content to be centered on the whole page and not just "in the space below". I used negative margins to achieve this.

See the working example here:

http://jsfiddle.net/WkQzw/5/

HTML:

<div id="container">
    <div id="table">
        <div id="cell">
            <div id="content">Some content</div>
        </div>
    </div>
</div>

CSS:

#container {
    width: 100%;
    height: 100%;
    padding: 100px 0;
    margin-top: -100px;
}
#table {
    display: table;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}
#content {
    background-color: lightblue;
    width: 50%;
    margin: 0 auto;
}

Tested:

IE 9 Win7 --> WORKS
Chrome 30 Mac --> WORKS
Safari 7 Mac --> WORKS
Firefox 25 Mac --> WORKS

Update:

I used box-sizing: border-box; but Firefox required an additional -moz-box-sizing: border-box;. Now it works also in Firefox.

Centering a div with a width of 100%?

if you want to just center a div within a container.Then you have style div within container as margin:0 auto; . Below is simple demonstration:

.container_{  width:100%;  height:700px;  background:green;}
.centreBox{  width:50%;  height:50%;  margin:0 auto;  background:red;}

<div class="container_">  <div class="centreBox">  </div></div>