Question

页面为here。来源非常简单。我已尝试使用absolute定位和其他一些方法进行此操作，但没有一种方法完全正确。

Answer 1

我改变了这些：

#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 */
}

如何将这些重叠元素居中？

2 个答案: