html - 如何确定 HTML 中文本的高度和宽度？

Question

我无法将文本 block 置于页面中央。 这是我试图居中的文本:

<div id="DIRECTIONS">
    <h2>Use the keyboard to rotate a face of the cube in a clockwise direction!
    <br>Hold down the shift key to rotate the desired face counter-clockwise.
    <br>Use your mouse to rotate the cube and zoom in and out.</h2>
</div>

在我的层叠样式表中，我有以下内容:

#DIRECTIONS{
    position:absolute;
    top:80px;
    left:31.5%;
    text-align:center;
}

使用上面的代码，当全屏显示时，文本(在某种程度上)在我的浏览器中居中。当我更改浏览器的大小时，文本会变得笨拙地移动并且根本不居中。我知道我需要指定文本的高度和宽度，但是有更简单的方法吗？或者有人可以帮我解决这个文本的高度和宽度吗？

谢谢

Answer 1

居中布局的工作原理如下:

HTML

<div id="DIRECTIONS">
    <h2>Use the keyboard to rotate a face of the cube in a clockwise direction!
    <br>Hold down the shift key to rotate the desired face counter-clockwise.
    <br>Use your mouse to rotate the cube and zoom in and out.</h2>
</div>

CSS

#DIRECTIONS
{
    width: 500px;
    margin: 0 auto;
    background-color: #f0f0f0;
}

给内部DIV一个特定的宽度，并将左右边距设置为自动。这会将其居中。这实际上是大多数居中布局的工作方式。即使浏览器窗口比实际内容小，它看起来也不错。

jsFiddle

http://jsfiddle.net/o4exkcjo/