我们可以使用Flexbox来实现这一点:

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

中心一个 div 内部一个 div 垂直:

#outer {
   display: flex;
   justify-content: center;
}

此分類上一篇

中心一个DIV内部一个DIV垂直:

#outer {
    display: flex;
    align-items: center;
}

此分類上一篇

到完全中间的 div 垂直和垂直:

#outer{
    display: flex;
    justify-content: center;
    align-items: center;
}

此分類上一篇

而不是多种包装和/或自动边缘,这个简单的解决方案对我来说工作:

<div style="top: 50%; left: 50%;
    height: 100px; width: 100px;
    margin-top: -50px; margin-left: -50px;
    background: url('lib/loading.gif') no-repeat center #fff;
    text-align: center;
    position: fixed; z-index: 9002;">Loading...</div>

它将Div放在视图(垂直和水平)的中心,尺寸和调整尺寸,中心背景图像(垂直和水平),中心文本(水平),并保持Div在视图和内容的顶部。

.outer {
    text-align: center;
    width: 100%
}

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top: -20px; /* Half of your height */
}

这将你的内心分散为垂直和垂直:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

只有垂直调整,变化

margin: 0 auto;

垂直,变化。

margin: auto 0;

这肯定会把你的内部都集中在水平上和垂直上,这也适用于所有浏览器,我只是添加了额外的风格,只是为了显示它是如何集中的。

#outer {背景:黑色;位置:相对;宽:150px;高度:150px; } 内部 {背景:白色;位置:绝对;左:50%;顶部:50%;转换:翻译(50%,-50%); -webkit-转换:翻译(50%,-50%); -moz-转换:翻译(50%,-50%); -o-转换:翻译(50%,-50%); } <div id="outer"> <div id="inner">Foo foo</div> </div>

但是,當然,如果你只想它垂直調整,這可能會幫助你。