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

3つの要素のラッパーを作成し、それに次の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 */
}