1、鼠标点击打开HBuilder软件，如图所示：
2、新建一个Web项目，如图所示：
3、输入web项目名CSS，然后点击完成按钮，如图所示：
4、然后在html文件中键入如下代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>CSS垂直居中的几种方法？</title> </head><style type="text/css"> #one1 { display: table; background-color: red;}#frist1 { display: table-cell; vertical-align: middle;}.second{ position: absolute; top: 50%; height: 240px; margin-top: -120px; /* negative half of the height */}#three { float: left; height: 50%; margin-bottom: -120px;}#thrid { clear: both; height: 240px; position: relative;}#four { height: 100px; line-height: 100px;} </style> <body> <h4>方法一、</h4> <div id="one1"> <div id="frist1"> <div>方法一内容</div> </div> </div> <br/> <h4>方法二、</h4> <div class="second"> 方法二内容</div> <br/> <h4>方法三、</h4> <div id="three"> <div id="thrid">方法三内容</div> </div> <br/> <h4>方法四、</h4> <div id="four">方法四内容</div> </body></html>
5、然后点击运行按钮，点击运行-->浏览器运行，如图所示：
6、在浏览器中查看居中结果，有些属性是文字居中，如图所示：
