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

Question

我想要类似dropbox的效果:https://www.dropbox.com/我的网站位于页面正中间的位置。

Answer 1

实现这种效果比应有的复杂得多。这是一个简单的工作示例:http://jsfiddle.net/JakobJingleheimer/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;
}