centering absolute string with variable width

by Danny_Joris

HTML

<div id="outer">outer
    <div id="inner">
      <span id="center">string with variable width</span>
    </div>
</div>

CSS

#outer
{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 200px 0 0 200px;
  border: 2px solid blue;
}

#inner
{
  position: absolute;
  width: 300px;
  top: -130px;
  left: 50%;
  margin-left: -150px;
  text-align: center;
    
  border: 1px solid red;
}



#center
{
  padding: 5px 10px;
  border: 2px solid blue;
}