Правильное центрирование div на основе дочернего элемента

Question

Это репост из раздела GameDev от StackExchange, но я обнаружил, что проблема кажется более применимой к Stackru, потому что она больше относится к CSS, JS и методам позиционирования, чем к темам JavaScript (в основном UnityScript и Phaser), которые обсуждались в первом.

Я делал игру в стиле roguelike в HTML5 без использования canvas (только div) с чистым JS ( fiddle!). Я пытался увеличить размер плитки (размер шрифта), сохраняя при этом игрока в центре камеры. По какой-то причине, когда размер плитки не равен размеру карты, камера будет немного выключена.

Обратите внимание, что 3D-эффект специально. Я верю, что это добавляет необходимую глубину и выглядит просто супер. : D

когда tileScale (строка 4 в скрипке) 9 (очень нежелательно; точки на оси у игрока должны быть выровнены, а не под небольшим углом):

когда tileScale является 25 (в тему!):

Вот некоторый соответствующий (урезанный) код:

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;
}

Как я могу гарантировать, что точки в центре экрана будут всегда выровнены, а не под небольшим углом? Мои нынешние данные свидетельствуют о том, что позиция game.planeContainer объект не устанавливается правильно.

Я знаю, что это очень сложная проблема, поэтому любая помощь будет принята с благодарностью. Заранее спасибо!

( Еще одна скриптовая ссылка, на случай, если вы пролистали первую.:D)

Answer 1

Удалите эту строку из ваших CSS-стилей на.inner-text, чтобы убрать перекос:
трансформировать: переводить (-50%, -50%);