html 宽度固定并布局居中模板框架

2018-01-12 14:16:28 html模板框架之宽度固定并布局居中的模板。

固定宽度并居中模板效果
固定宽度并居中模板效果

完整代码（可直接拷贝使用）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单一固定居中框架 在线演示 HTML8</title>
<style type="text/css">
body {font: 14px/24px 宋体, 新宋体;background: #666666;margin: 0;
padding: 0;text-align: center;color: #000000}
#container {width: 780px;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>#container 对应最外层div id=container设置了居中，并设置固定宽度，实现了布局居中与固定宽度 html模板框架</p>
<h2>《三国演义》文段 </h2>
    <p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，
左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，
洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。
秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，
乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。
后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。</p>
	</div>
</div>
</body>
</html>

演示地址：

运行代码试试

免费下载地址：

立即下载（1.73KB）

以上为html网页布局常见宽度固定并且布局水平居中的布局资源代码，采用纯div css布局。