How to size a div box in CSS so text is centered regardless of length

Question

I find it difficult to express the question in words since I'm not knowledgeable enough about CSS. So, I've made two example jsfiddles.

In this first example we see how the output shows a left aligned text. http://jsfiddle.net/Aro2220/yw38p/

But in this second example we see that when the text is long enough it fills the entire width of the frame (not sure if that's the correct term) and centers nicely all the way down. http://jsfiddle.net/Aro2220/DUcP6/

I am trying to get the text to be perfectly centered in that frame regardless of length. How can I do this? My CSS is pretty sparse and I'm not sure if there's a CSS command I'm missing that does this easily or if this is a complicated task.

#outer {
    position: absolute;
    overflow: hidden;
    height: 200px;    
}

#inner {
   position: relative;  
   top: 0px;    
   text-align: center;
}

Answer 1

use this Demo1 Demo2

this will do the trick

#outer {
    position: absolute;
    overflow: hidden;
    height: 200px;
    width:100%; // added this to make the outer div width 100%
}

Suggested by sfjedi

if you have issues w/ margins and/or padding giving you an unwanted horizontal scrollbar, use css box-sizing: border-box so the 100% width doesn't throw you off