title: Centering a CSS transform (scale)
body: <p>I have created a fiddle here, and just wondered how to go about centering the object - so that the heart is centered, and it scales outwards when you hover over it, rather than animating to the lower right.</p>
  
  <pre><code>@-webkit-keyframes beat {
  0% {
  -webkit-transform: scale(1);
  -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
  font-size: 90%;
  color: #cc0404;
  }
  
  50% {
  -webkit-transform: scale(1.1);
  -webkit-filter: drop-shadow(0 0 15px rgba(213, 9, 60, 0.2));
  font-size: 120%;
  color: #e50505;
  }
  
  100% {
  -webkit-transform: scale(1);
  -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7));
  font-size: 90%;
  color: #cc0404;
  }
  }
  
  .heart-box {
  margin: 0 auto;
  width: 90%;
  padding-top: 20px;
  cursor: pointer;
  font-size: 15em;
  -webkit-filter: drop-shadow(0 0 0 white);
  -moz-filter: drop-shadow(0 0 0 white);
  filter: drop-shadow(0 0 0 white);
  }
  
  .heart {
  color: #e62020;
  -webkit-transition: font-size 0.1s ease;
  -moz-transition: font-size 0.1s ease;
  transition: font-size 0.1s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
  }
  
  .heart:hover, .heart:focus {
  -webkit-animation: beat 0.7s ease 0s infinite normal;
  -moz-animation: beat 0.7s ease 0s infinite normal;
  -ms-animation: beat 0.7s ease 0s infinite normal;
  -o-animation: beat 0.7s ease 0s infinite normal;
  animation: beat 0.7s ease 0s infinite normal;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/DBirkett/3DbTn/" rel="nofollow">http://jsfiddle.net/DBirkett/3DbTn/</a></p>