Frully.org

居中元素最常用的语句是“margin: 0 auto;”，不过这只适用于设置了宽度的元素，如果一个元素的宽度需要根据内容自动缩放（如导航条），就需要使用“50%相对定位”的方法。

我们需要把 #em 居中，首先给 #em 包裹上一个容器元素：

<div id="wrap">
  <div id="em">卖女孩的小火柴</div>
</div>

然后如下设置 CSS：

#wrap {
  float: left; /*自动适应内容宽度*/
  position: relative;
  left: 50%; /*定位#wrap的左边在body的中线上*/
}
#em {
  position: relative;
  left: -50%; /*定位#em的中线在#wrap的左边上，也就是body的中线，也就是与body居中*/
}

查看演示

刚装 Dreamweaver CS5 的时候，发现新建文档的时可以选择 HTML5 文档类型，就想 Adobe 挺超前啊，现在就开始支持 HTML5 了。直到最近研究 HTML5，才发现 Dreamweaver 只是把 DOCTYPE 变了一下，没有支持 HTML5 代码提示。

于是上网搜索，找到 Adobe 自家出的这么一个扩展：HTML5 Pack，以下是官方的特性列表：

• 引入多屏预览面板，允许实时预览 3 种不同尺寸的屏幕，支持媒体查询。（窗口 > 多屏预览）
• 为 HTML5 标签库中的新标签、属性（attributes）、属性（properties）添加代码提示。
• 为现有 HTML 标签的新属性和值更新代码提示。
• 为以下 CSS3 规范添加代码提示：2D/3D 变形、动画、背景和边框、基础用户界面、线布局、字幕、媒体查询、多列布局、注音、文本、过渡。
• 更新实时预览以支持 <video> 和 <audio>。（需要安装 Quicktime。）
• 改进实时预览对 CSS3 的渲染。
• 在新建文档对话框中添加 HTML5 初始布局。
• 为新标签在设计视图中提供更好的渲染。

需要补充的是：

1. 该扩展只支持 Dreamweaver CS5 （有支持 CS3、CS4 的版本，见文末）；
2. 代码提示不只是支持规范中的 CSS3 属性，还包括各常见浏览器的私有属性，写过 CSS3 的同学都知道，这非常有用；
3. 所谓初始布局就是新建文档里可以选择的布局，这个扩展增加了 HTML5 的布局，可以帮助我们熟悉 HTML5 的文档结构。

介绍到此，这是 HTML5 Pack for Dreamweaver CS5 的下载页面。

还有一个CS3、CS4 使用的版本：HTML5 Pack for Dreamweaver CS3 and CS4。这个版本比 for CS5 版有所简化，建议要用就用最新的吧。