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

您可以将text-align: center;添加到.blackout。

如果不了解HTML的结构方式，很难说这是否就是您需要做的事情。

<强>更新：

还将margin: auto添加到.firstTime并删除了position:absolute

Answer 2

从我没有html收集的内容中，你可以绝对定位.firstTime类并将top设置为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上，所以我没试过这个。

表格单元格与遮光框对齐

2 个答案: