javascript - 如何将网站与屏幕顶部/底部和右侧/左侧的中心对齐？

我想要像dropbox：https://www.dropbox.com/这样的效果，其中我的网站位于页面的正中间。

最佳答案

实现这种效果的方式比应该的要复杂得多。这是一个简单的工作示例：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;
}