javascript - Properly centering div based on child element -

this repost stackexchange's gamedev section, yet, find problem seems more applicable stackoverflow because pertains more css, js, , positioning techniques rather javascript topics (mostly unityscript , phaser) discussed on former.

i've been making roguelike-style game in html5 without using canvas (only divs) pure js (fiddle!). i've been trying enlarge tile size (font size) while keeping player centered within camera. reason, when tile size isn't equal map size, camera off.

note 3d effect on purpose; believe adds needed depth, , looks super cool. :d

when tilescale (line 4 in fiddle) 9 (very undesirable; dots on player's y axis should aligned, not @ slight angle):

when tilescale 25 (on point!):

here's relevant (trimmed) code:

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 ratio of 3:4 (width:height), conveniently.     // may problematic. i'm not sure.     game.tilewidth = game.windowsize*.6 / game.tilescale;     game.tileheight = game.windowsize*.8 / game.tilescale; }  // update camera position (needs help?) this.updatecamera = function(){     // player coordinates (-.5 because need player tile center)     // times tilewidth plus game window (inner square) size divided 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; } 

how can ensure dots in center of screen lined up, instead of on slight angle? current evidence suggests position of game.planecontainer object isn't being established correctly.

i know super-tough problem, appreciated. in advance!

(another fiddle link, in case skimmed on first one. :d)

remove line css stylings on .inner-text take out skew:
transform: translate(-50%, -50%);