Javascript 如何使用dynamic&；静态内容？

好的，我有以下HTML：

<div id="header">
    <div id="header_inner">
        <div id="header_image">
            <a href=""><img src="..."/></a>
        </div>
        <div id="header_content">
            <h1 id="header_content_h1">Dynamic Content</h1>
        </div>
    </div>
</div>

动态内容

我想用id

header\u inner

将div居中

#header {
    width: 100%;
    display: inline-block;
    text-align: center;
}
#header_inner {
    display:inline-block;
}

但是我的问题是id

header\u content

的div包含动态内容，因此它可以是任意宽度

目前，我通过在

窗口使用Javascript设置
标题的宽度来解决这个问题。onload
和用于居中div的常规css（
margin:auto；
），但这会导致内容最初在页面左侧加载，几毫秒后跳转到中心。这种跳跃在直播网站上非常明显

JSFiddle：

*跳转不会出现在JSFIDLE中，但会出现在实时站点上；这只是为了向你展示我是如何行动的

那么，有没有可以避免这种跳跃的替代方案？我的意思是我猜这是一种常见的情况。
您可以在
标题内部使用
显示：内联块
，在
标题
上使用
文本对齐：居中

#header {
    width: 100%;
    display: inline-block;
    text-align: center;
}
#header_inner {
    display:inline-block;
}

更新的fiddle:
您只需在
标题内部
元素上使用
最大宽度
。看起来您真的不需要它们：FWIW，跳转是由浏览器加载所有页面内容的延迟引起的，然后加载页面后会触发
窗口。onload
事件。您可以使用
文档将其最小化。准备好了吗？