如何将网站对齐屏幕顶部/底部和右/左中心？

Question

I want to have the effect like dropbox:https://www.dropbox.com/ where my website is centered in the exact middle of the page.

Answer 1

Achieving this effect is way more complicated than it should be. Here's a bare-bones working example: http://jsfiddle.net/jshado1/UEsYM/

html, body { height: 100%; } // needed for vertical centre

html { width: 100%; } // needed for horizontal centre

body {
    display: table; // needed for vertical centre
    margin: 0 auto; // needed for horizontal centre
    width: 50%; // needed for horizontal centre
}

.main-container {
    background-color: #eee;
    display: table-cell; // needed for vertical centre
    height: 100%; // needed for vertical centre
    // overflow: auto; // <- probably a good idea
    vertical-align: middle; // needed for vertical centre
    width: 100%; // needed for horizontal centre
}

.container {
    background-color: #ccc;
    padding: 20px;
}