Javascript 基于子元素正确居中div

这是StackExchange的GameDev部分的转载，但是，我发现这个问题似乎更适用于StackOverflow，因为它更多地涉及CSS、JS和定位技术，而不是前面讨论的JavaScript主题（主要是UnityScript和Phaser）

我一直在用HTML5制作一款类似流氓风格的游戏，而不使用画布（仅DIV）和纯JS（）。我一直试图放大磁贴大小（字体大小），同时使播放器在相机内居中。由于某种原因，当磁贴大小不等于地图大小时，相机将稍微关闭

注意3D效果是故意的；我相信它增加了一些急需的深度，而且看起来非常酷D

当

tileScale

（小提琴中的第4行）为

9

（非常不可取；播放器y轴上的点应对齐，而不是以微小角度）：

当

tileScale

为

25

（点上！）时：

以下是一些相关（修剪过的）代码：

如何确保屏幕中心的点始终对齐，而不是略微倾斜？我目前的证据表明，

游戏.planeContainer

对象的位置没有正确确定

我知道这是一个非常棘手的问题，所以任何帮助都将不胜感激。提前谢谢

---

（）

从您的css样式中删除这一行。内部文本以消除倾斜：

---

转换：翻译（-50%，-50%）

这有点奇怪；

.internaltext

中的那一行应该将文本置于其容器div的中心（避免奇怪的偏移）。这会消除倾斜，但会将播放器放置在远离中心的位置（减少

tileScale

以获得良好的外观）+我希望能有一些奇怪的见解，但问题的根源还没有解决。嗯，我不知道你说的球员远离中心是什么意思。在我看来，@在没有翻译的情况下仍然居中，即使是最低的瓷砖。你在哪个浏览器/操作系统中查看它？等等，这真的很奇怪。我不久前试过这个，但那个球员太离谱了。我在Windows8.1上使用Chrome，如果您使用Inspect元素、PrtScr和图像编辑器，您可以看到播放器稍微关闭（大约6-25像素）。注释掉

translate

行对我来说似乎很奇怪（因为它不能完全解决问题），我仍然不确定这是否与CSS有关。

window.onresize = function(){
    game.viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    game.viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    game.windowSize = Math.min(game.viewportWidth, game.viewportHeight);
    // Droid Sans Mono has a ratio of 3:4 (width:height), conveniently.
    // This may be problematic. I'm not sure.
    game.tileWidth = game.windowSize*.6 / game.tileScale;
    game.tileHeight = game.windowSize*.8 / game.tileScale;
}

// Update the camera position (needs help?)
this.updateCamera = function(){
    // Get player coordinates (-.5 because we need to get the player tile center)
    // times the tileWidth plus the game window (inner square) size divided by two.
    var left = ((-game.player.x-.5)*game.tileWidth+game.windowSize/2)+"px";
    var top = ((-game.player.y-.5)*game.tileHeight+game.windowSize/2)+"px";
    game.planeContainer.style.left = left;
    game.planeContainer.style.top = top;
}