A CodePen by Rolando Murillo. Vertical and horizontal centering - No width required!

index.html

<h1 class="center-x">X</h1>
<h1 class="center-y">Y</h1>
<h1 class="center-xy">XY</h1>

style.css

* { margin: 0; padding: 0; }
h1 {
  font-family: 'gill sans';
  font-weight: normal;
  text-transform: uppercase;
  color: white;
  background: red;
}

.center-xy, .center-x, .center-y {
  position: absolute;
}
.center-x, .center-xy {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.center-y, .center-xy {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.center-xy {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}