css - 表格单元格在遮光框中对齐

Question

这是我的代码:

.blackout {
    background-color: rgba(0, 0, 0, .9);
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    display: none; /*This is changed by javascript to table */
}

.firstTime {
    font-size: 18px;
    background-color: white;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    height: 10em;
    width: 20em;
}

元素本身非常简单……只是一个只有文本的跨度。我试图将它居中，自动调整大小。我所做的一切都没有用。有什么建议吗？

JS fiddle :http://jsfiddle.net/jNeeL/

Answer 1

根据我在没有 html 的情况下收集到的信息，您可以绝对定位 .firstTime 类并将顶部设置为 50%，将左侧设置为 50%，然后使用负的顶部和左侧边距作为 .firstTime 对象的一半高度和宽度:

像这样:

.blackout {
background-color: rgba(0, 0, 0, .9);
position: relative;
height: 100%;
width: 100%;
display: none; /*This is changed by javascript to table */
}
.firstTime {
font-size: 18px;
background-color: white;
display: table-cell;
text-align: center;
position: absolute;
height: 10em;
width: 20em;
top:50%;
left:50%;
margin:-5em 0 0 -10em;
}

在我的 ipad 上，所以我还没有尝试过。