html结构性网页模板之，宽度以em为单位的弹性宽度布局居中的html网页模板框架资源。
布局居中 宽度为em单位弹性网页模板
看似我们设置宽度为em单位的值，实际em是相对单位，如果浏览器默认字体不同那么em换算出值将不同，自然就变成网页为弹性宽度。需要注意body设置字体大小时一定设置为100%，这样浏览器会根据平台判断默认给出字体大小。如果设置固定字体大小比如12px，那么布局出以em为宽度布局将自动固定了，布局宽度就不是弹性宽度了。
模板代码（可直接拷贝使用）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹性宽度并居中布局html模板 在线演示 HTML8</title>
<style type="text/css">
body {font: 100% 宋体, 新宋体;background: #666666;margin: 0;padding: 0;text-align: center;color: #000000;}
#container {width: 46em;background: #FFFFFF;margin: 0 auto;border: 1px solid #000000;text-align: left;}
#mainContent {padding: 0 20px;}
</style>
</head>
<body><div id="container">
<div id="mainContent">
<h1> 模板介绍 </h1>
<p>这里设置对布局布局的盒子设置相对宽度46em，也就是随浏览器对字体大小解释宽度而改变，比如默认浏览器字体大小为16px，那么宽度16px*46=736px，
如果其它浏览器默认字体为22px,那么宽度将改变，实现布局的网页宽度弹性，而固定的。</p>
<h2>《三国演义》文段 </h2>
<p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。
忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，
飞入温德殿中。秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。
帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。
帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
</div>
</div>
</body>
</html>
在线演示：
免费下载地址：
特别注意：弹性布局，最外层DIV以em为单位，并且body字体大小值设置为100%。