div的垂直和水平中心

Question

有人可以告诉我为什么这段代码不起作用

 <div id="dojam_text_container" style="width: 300px; height: 300px; 
                      margin:auto;  background-color:Blue;">
                      <div style="display:table-cell; vertical-align:middle;">
                    <span id="text_dojmovi1" style="">"bla bla bla</span></div>
</div>

这就是..

 <div style="position:absolute; top:10vw; left:10vh;">
    <div style=" border: dotted red 1px; background-color:white; width:20vw; height:
           20vh; display:table-cell; text-align:center; vertical-align:middle; position:relative;">
           <span> I am some centered shrink-to-fit content! 
               <br />
           </span>
     </div>
 </div>

Answer 1

将display:table提供给您的父div

<div style="position: absolute;display:table;width:300px; height:300px; top:100px; left:100px; background-color:Black;">
 .............
</div>

Fiddle

Docs to understand tabular structure using divs

Answer 2

垂直＆amp;水平居中

常见问题：

• 家长没有职位设置
• 祖先没有高度或宽度设置

已知尺寸

的儿童的解决方案

如果您需要兼容IE6，这是一个解决方案。如果您知道孩子的尺寸，那么

1. 定义父级的高度/宽度。
2. 设置父级的定位
3. 将孩子绝对放在上面，左边是50％，50％。
4. 添加负边距以抵消孩子的身高和宽度

JsFiddle

html, body, div.parent {
    position: relative;
    width: 100%;
    height: 100%;
}

div.child {
    position: absolute;
    width: 10em;
    height: 10em;
    top: 50%;
    margin-top: -5em;
    left: 50%;
    margin-left: -5em;
}

尺寸未知的儿童的解决方案

此解决方案适用于IE8 +。如果您不知道尺寸：

1. 定义父级的高度/宽度。
2. 将父级的显示设置为表格
3. 将父级设置为vertical align：middle

JsFiddle

div.fluid.parent {
    display: table;
    vertical-align: middle;
}

div.fluid.child {
    width: auto;
    height: auto;
}

更多资源

有关更多资源，请参阅w3.org