边距 div 以水平和垂直居中答案

【问题标题】：Margin div to center both horizontal and vertical边距 div 以水平和垂直居中
【发布时间】：2017-05-18 04:51:42
【问题描述】：

我无法将 div id by : game-area 设置为水平和垂直居中。

它需要在跨平台上工作。我试图设置 marig-top 或 padding，但在边距上，背景图像与 div 一起下降。当我使用填充时，网站在所有分辨率上看起来都不同。

我也尝试在 css 中将显示设置为表格和边距自动，但它只对齐一个维度

网站页面（点击“zagraj”后刷新内容，此刷新需要留边距）：

http://nwstudio.esy.es/panda/main/

移相器：

var game = new Phaser.Game(360,640,Phaser.CANVAS, 'game-area');

HTML：

<body> 
    <div id="main">
        <CENTER>
                <img src="img/background.png"/>
        </CENTER>
    <center>
        <a href='#' id='run'><img src="img/button_start.png"/></a>
    </center>
    </div>

    <div id="game-area">
    </div>
</body>

CSS：

body{
    padding: 0px;
    margin: 0px;
    background-image: url('../img/background_second.png');
    height: 100vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow-y: hidden;
    position: relative;
}

#game-area{
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align:middle;
}

#main{
    display: block; background-color: #FFF; width: auto; height: 6000px;
}

@media only screen and (max-device-width: 1024px) {
    canvas{
        width: 100% !important;
        height: 100% !important;
    }


@media only screen and (device-width: 412px) {
    canvas{
        width: 100% !important;
        height: 80% !important;
        margin-top: -12px;
    }
}

【问题讨论】：

Best way to center a <div> on a page vertically and horizontally?的可能重复
从最佳方式到中心的修复....不起作用

标签： html css html5-canvas phaser-framework

【解决方案1】：

如果您希望游戏画布适合游戏 div，您可以使用 Phaser 的内置缩放模式。在您的引导功能中，您可以像这样放置代码：

init: function() {
        //Making the screen work in different orientations on different devices
        this.scale.pageAlignHorizontally = true;
        this.scale.pageAlignVertically = true;
        //this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        //If the player clicks outside the game, it continues running - anti-cheating
        this.stage.disableVisibiltyChange = true;

有不同的缩放模式，但听起来你想要 Phaser、ScaleManager.SHOW_ALL 或 EXACT_FIT

请参阅 here 以查看有关 Phaser 比例管理器的文档。

【讨论】：

谢谢你！ :) 当我将游戏区域分隔为两个背景时它可以工作:)