1、打开HBuilderX工具,在已新建的Web项目中,新建静态页面center.html

2、打开已创建的页面文件,修改title标签内容,并引入相关的js文件

3、在<body></body>标签中,插入一个父子嵌套的di箪滹埘麽v标签,分别设置id值为father和son

4、在style标签中,利用ID选择器设置父子div标签的样式,如宽度、边框、字体属性、背景色等

5、保存代码并运行项目,打开Firefox浏览器,查看到文字内容还是居左显示

6、接着在子div标签样式中添加一个margin:auto 0,然后保存代码

7、再次刷新火狐浏览器,可以发现文字内容居中显示(相对于父div元素)
