CSS Centering is by top left of inner element

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!


Source: css3

Leave a Reply