边距 div 水平和垂直居中

Question

我无法通过以下方式保证 div id：游戏区域水平和垂直居中。

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

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

网站页面（点击"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;
    }
}

Answer 1

如果您希望游戏 canvas 适合游戏 div，您可以使用 Phaser 的内置缩放模式。在你的启动函数中，你可以将代码 liuke 设置为：

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 缩放管理器的文档。

边距 div 水平和垂直居中

Margin div to center both horizontal and vertical

html

css

html5-canvas

phaser-framework