html - 如何使这些重叠元素居中？

Question

页面在这里。来源非常简单。我试过用absolute定位和其他一些方法来做到这一点，但没有一个是完全正确的。

Answer 1

见这里：http: //jsfiddle.net/yXUdN/

我改变了这些：

#title {
    position:absolute;
    width:240px;
    height:240px;
    z-index:99;
}
#space-link {
    position:absolute;
    margin:auto;
    top:40%;
    left:30%;
    font-family: 'Josefin Slab', serif;
    font-size:2em;
    color:#FFF;
    z-index:99;
}

对此：

#title {
}
#space-link {
    font-family: 'Josefin Slab', serif;
    font-size:2em;
    color:#FFF;
    text-align:center; /* horizontal center */
    line-height:240px; /* vertical center */
}​

您也可以使用display:table规则来完成此操作，这在文本跨越多行的情况下会更好：http: //jsfiddle.net/yXUdN/1/

.space-button {
    ...
    display:table;
}
#title {
    display:table-row;
}
#space-link {
    ...
    vertical-align:middle;
    text-align:center;
    display:table-cell;
}​

此外，您不应该有多个具有相同 ID 的元素。改用类。

Answer 2

您可以为这三个元素创建一个包装器并将以下 css 应用于它

.wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -408px; /* half of the total width of the three elements (272 * 3) / 2 */
    margin-top: -136px; /* half of the height of one of the elments 272 / 2 */
}