div+css如何让页面居中显示

发布时间：2021年10月07日 08:32:01 | 责任编辑 : 沐风 | 分类 : 网页设计 | 浏览: 4367次 | 评论 0 人

很多朋友在制作页面的时候，发现页面总是考左显示，无论怎么做都不能让页面居中对齐。事实上通过div+css让页面具体显示是很简答的，下面给大家看下代码：

<style>
.main {margin: 0 auto; width: 1200px; background-color:#FFFFFF}
.main_q {width: 1200px; height:300px;}
</style>
<div class="main">
<div class="main_q">这里是内容部分</div>
</div>

上面的代码大家可以复制下来，保存文件为html文件，然后看看效果，会发现网页是居中对齐的。

这里大家要注意给页面加个外层的框架，也就是前面代码中的main这个样式，margin: 0 auto; 想要页面居中显示这句是必不可少的。我们可以把后面的代码都包含在 main 这个div里面，也可以把main这个div看成是区域，页面有几个内容区块就复制出几个区域。

这里笔者建议大家不必对这些代码名词做深度的研究，只需要记住它是怎么用的就可以了。笔者甚至有很多的html代码都不知道拼写，但这不影响到笔者制作页面模板，因为dreamweaver里面已经集成了这些css样式，我们只需要调用就行。当然，如果你直接使用记事本来制作页面的话，那么就需要纯手动去敲代码，这也是没有必要的！

以上就是关于div+css如何让页面居中显示的内容，代码很简单，代码里注意 margin: 0 auto; 这句就成，大家可以直接拿去使用。另外大家如果经常需要用到这些代码的话，可以把代码保持下来，需要用的时候拿来即可，这样就能够大大提升工作效率。

本站内容大部分由沐风博客原创，少部分内容来源于网络，如有侵权请与我们联系，我们会及时删除！

div+css如何让页面居中显示

扩展阅读