多语言展示
当前在线:1605今日阅读:27今日分享:41

如何在css设置div在屏幕中央

在css中,可以使用margin属性来设置div居中显示,下面小编举例讲解如何在css设置div在屏幕中央。
工具/原料
1

html+css

2

代码编辑器:Dreamweaver CS5

方法/步骤
1

新建一个html文件,命名为test.html,用于讲解如何在css设置div在屏幕中央。

2

在test.html文件内,使用div标签创建一个模块,用于测试。

3

在test.html文件内,给div标签添加一个id属性bbb,主要用于下面通过该id设置css样式。

4

在test.html文件内,编写标签,页面的css样式将写在该标签内。

5

在css标签内,通过id(bbb)设置div的样式,定义div的宽度和高度为200px,背景颜色为红色,同时将margin属性设置为'0 auto',用于让div左右两边自动取距离,实现居中显示。

6

在浏览器打开test.html文件,查看实现的效果。

总结:

1、创建一个test.html文件。2、在文件内,使用div创建一个模块,并设置div的id。3、在css标签内,使用css设置div的长度高度,同时使用'margin:0 auto'设置div居中显示。

注意事项

除了上面的方法外,也可以使用position定位属性,通过百分比距离让div居中。

推荐信息