DIV CSS固定宽度居中实例

在组织一个网页时，颇为必要的是一样平常网页主体结构都是程度居中的，实在便是对最外的DIV层配置居中布局，这时布局居中就是我们这里要引见症结点。

DIV机关程度居中，症结运用CSS单词为margin:0 auto。
诠释：DIV对象外边距支配为自动适应隔绝距离（依据对象设置装备摆设宽度花色积极武断涉猎器裁撤设置装备摆设宽度后剩下宽度摆布积极对等人造就实现结构居中），高下间距为0px。

症结实例CSS代码：

body{ text-align:center}
.box{ margin:0 auto; width:500px; height:100px; border:1px solid #00F}

首先对body设置装备摆设个css模式居中，当然也是为了兼容各大阅读器默许状况下模式为居中初始设置装备摆设，若何再对需要居中的抉择器设置构造居中(margin:0 auto)，固定宽度设置装备摆设为500px，高度100px，CSS边框为1px蓝色实线边框。

这里配置500px宽度是任意配置，实践组织中依据需求配置，为了看到DIV被居中构造，所以退出高度和边框，以便窥察到固定宽度居中实例造诣。

实例完整HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIVCSSS5实例</title>
<style>
body{ text-align:center}
.box{ margin:0 auto; width:500px; height:80px; border:1px solid #00F}
</style>
</head>
<body>
<div class="box">CSS5静止宽度居中实例</div>
</body>
</html>

各人概略直接拷贝代码留存就可观测实例造诣。

实例成就截图

DIV+CSS固定宽度居中实例效果截图 DIV+CSS静止宽度居中实例成绩截图

在CSS5网给各人先容过不少篇对付布局居中文章教程，着实最症结CSS代码就是margin:0 auto，这里需要额外阐明是，各人要让对象组织居中，那么就不一定不要使用float浮动名目，假设设置装备摆设对象float浮动名堂，这个时候无论设置装备摆设margin:0 auto花色照样不有设置装备摆设，对象都不会结构居中，由于最根蒂根基逻辑等于舛错的，即设置居中又配置浮动靠左或靠右显露是舛错的。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/shili/s52176.shtml