CSS DIV 固定宽度居中的方法-html教程-PHP中文网

CSS DIV 固定宽度居中的方法

php中文网

发布： 2016-06-01 09:53:18

原创

2774人浏览过

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被居中布局，所以加入高度和边框，以便观察到固定宽度居中实例效果。

实例：

Kuwebs企业网站管理系统3.1.5 UTF8

酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描

查看详情

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS DIV 固定宽度居中的方法</title> 
<style> 
body{ text-align:center} 
.box{ margin:0 auto; width:500px; height:80px; border:1px solid #00F} 
</style> 
</head> 
<body> 
<div class="box">CSS DIV 固定宽度居中的方法</div> 
</body> 
</html>

登录后复制

在线运行

立即学习“前端免费学习笔记（深入）”；