使用CSS实现DIV自动页面居中

在初学Dreamweaver CC 2018的过程中，很多朋友都不知道如何让DIV自动居中在整个页面的中间位置。今天我将教大家如何通过CSS来实现这个效果。

步骤一：创建新的HTML网页

启动DW后，创建一个新的HTML网页，并将网页保存到桌面位置。这样我们就可以通过快捷键F12进行实时在线预览效果。

步骤二：添加DIV标签组

在body中添加一个DIV标签组，并为它添加CSS样式，包括DIV的宽度（width）和高度（height），以及背景颜色，方便我们浏览时能够清楚地看到效果。

步骤三：嵌入式CSS代码

在顶部的title标签下，输入嵌入式CSS代码，并给body定义另一个背景颜色，与DIV的背景色有所区分。

步骤四：解决顶部和左边的间距问题

按下快捷键F12，在浏览器中预览实时效果，你会发现DIV与背景之间有一定的距离。为了解决这个问题，在body样式中，添加外边距和内边距都为0的代码（margin: 0; padding: 0;），然后保存网页。

步骤五：实现DIV自动居中

现在已经没有间距了，接下来我们需要实现DIV的自动居中。在DIV的样式中，再添加一个自动居中的代码（margin: 0 auto）。保存网页并再次预览效果，这次你会成功地实现DIV的自动居中。

通过以上步骤，你已经学会了如何使用CSS实现DIV自动页面居中。希望对你有所帮助！

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。