css垂直居中的几种方法
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、在浏览器中查看居中结果，有些属性是文字居中，如图所示：
