CSS Centering is by top left of inner element - html

Question

I'm trying to center an inner element using CSS, and for some reason the inner element is centering based on the top left corner, rather than its center: http://codepen.io/anon/pen/WvxeEo
HTML:
<div class="topic">
<span class="title-box">hello!</span>
</div>
CSS:
.topic {
background-color: #84BACE;
border: 1px solid #e8e8e8;
width:500px;
height:500px;
position: relative;
}
.title-box {
background-color: #000;
color: #fff;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);"
}
Is there a way to set it so that it's properly centered? The inner element will be of unknown width/height, as it's dynamic text.
Thanks!

Answer 1

Try this — http://codepen.io/sergdenisov/pen/ZGOzrr:
.topic {
background-color: #84BACE;
border: 1px solid #e8e8e8;
width:500px;
height:500px;
position: relative;
}
.title-box {
background-color: #000;
color: #fff;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

Answer 2

I made one simple change to your code here.
I hope this is what you were asking. The reason "hello" was centered in the blue instead of the page was that that span was inside the blue div. I simply moved the span outside of the div.
<div class="topic"></div>
<span class="title-box">hello!</span>