css - 幅のない要素のセンタリング

Question

全幅のフッター内で要素 (adivを含むh1) を中央に配置しようとしていたところ、理解できない動作に遭遇しました: コンテナーに a を追加width(および を削除inline-block) するまで、footer-innerスワップアウトしても中央に配置されませんでしたのh1場合img、同じ結果が得られます。要素はハード左です。

HTML

<div class="footer-outer">
    <div class="footer-inner">
        <h1>Foo Barson</h1>
    </div>
</div>

CSS

.footer-outer {
    width: 100%;
    border: 2px green solid;
    position: fixed;
    left: 0;
    bottom: 0px;
}

.footer-inner {
    border: 2px red solid;
    margin: 0 auto;
    display: inline-block;
    /* width: 144px; */
}

.footer-inner h1 {
    border: 2px black dashed;
    font-size: 130%;
    text-transform: uppercase;
}

ここにjsfiddleがあります。

要素が「幅なし」の場合を理解したいです。あなたが説明したり、私にいくつかの読み物を教えてくれたりしたら、それは素晴らしいことです.