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


<div class="topic">
<span class="title-box">hello!</span>


.topic {
 background-color: #84BACE;
  border: 1px solid #e8e8e8;
 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.


Source: css3

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.