<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.block {
height: 300px;
text-align: center;
border:1px solid red;}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
/* margin-right: -0.25em; *//* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
width: 50%;
border:1px solid red;
}
</style>
</head>
<body>
<div class="block" >
<div class="centered">
<h1>haorooms案例题目</h1>
<p>haorooms案例内容,haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
</div>
</div>
</body>
</html>
效果如图: