How to center text in a smaller div?
<p>Is it possible to horizontally center the text in a smaller sized div? The character length will change over time. So it's not an option to make an offset for each item.</p>

<p>See example: </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  width: 100%;
  height: 50px;
  background: yellow;
}
a {
  width: 100px;
  height: 100px;
  margin: 0 50px;
  background: red;
  white-space: nowrap;
  float: left;
}
span {
  position: absolute;
  top: 0px;
  text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;a href="" class="box-1"&gt;
    &lt;span&gt;Lorem&lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="" class="box-2"&gt;
    &lt;span&gt;Lorem ipsum dolor sit amet&lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="" class="box-3"&gt;
    &lt;span&gt;Lorem ipsum dolor sit&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>