【示例】下面示例演示如何设置块元素居中显示。text-align属性只能够设计文本的水平对齐问题，而对于块状元素的水平对齐还需要使用CSS的margin属性。在标准化设计中，如果当块状元素左右边界都被设置为自动时，则块状元素将居中显示。
新建一个网页，保存为test1.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义盒子对象居中显示。
#box {/* 块状元素居中对齐 */
margin-left:auto; /* 左侧边界为自动 */
margin-right:auto; /* 右侧边界为自动 */
width:300px; /* 定义盒子的宽度 */
height:50px; /* 定义盒子的高度 */
background:red; /* 红色背景色 */}
为了方便观察块状元素居中显示的效果，在上面样式中定义盒子固定宽度和高度，并以红色背景显示。
然后在<body>标签中输入<div>标签，并定义该盒子的ID值为box。
<div id="box"></div>
在标准浏览器中预览，则显示效果如图1所示。
【拓展】
由于不同浏览器及其不同版本对于CSS支持的不同，上述效果在IE6及其以下版本浏览器不支持这种块状元素居中对齐的方式，如图2所示。不过IE浏览器使用text-align属性都可以设置块元素水平对齐。
图1 IE 10中的解析效果
图2 IE 5.5中的解析效果
因此，为了兼容IE浏览器，可以添加text-align属性声明，以实现浏览器的兼容显示。针对上面示例，使用如下的兼容样式表。
<style type="text/css">
body {/* 页面居中显示 */
text-align:center; /* 居中显示 */}
#box {/* 块状元素居中对齐 */
margin-left:auto; /* 左侧边界为自动 */
margin-right:auto; /* 右侧边界为自动 */
text-align:left; /* 恢复文本左对齐默认样式 */
width:300px; /* 定义盒子的宽度 */
height:50px; /* 定义盒子的高度 */
background:red; /* 红色背景色 */}
</style>
在使用上述兼容技巧时，应该注意两个问题：
- 必须定义布局包含框为居中对齐，其目的就是为了兼容IE早期版本浏览器。如上面示例中，body元素就是div元素的布局包含框。所谓布局包含框就是包含子元素的块状元素，通俗地说就是父级块状元素。而对于下面这样的包含结构就不能够算是布局包含框了：
<span> <div id="box"></div> </span>
因为span元素默认为行内元素，它不具有布局特性，不过它也算作包含框，进一步说就是行内包含容器。
- 在对齐块状元素中使用text-align属性把居中对齐的文本再恢复到默认的左对齐状态。因为在父级元素中定义了居中对齐方式，根据CSS继承性，则其包含的文本也会自动居中，为了避免此举破坏文本显示效果，需要再恢复默认对齐方式。