1、利用display属性
<html>
<head>
<style>
.wrapper {
display: table;
height: 100px;
border-style: solid;
}
.cell {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="cell">
google
</div>
</div>
</body>
</html>
2、利用position属性
<html>
<head>
<style>
.content {
position: absolute;
top: 10%;
height: 240px;
margin-top: 120px;
border-style: solid;
}
</style>
</head>
<body>
<div class="content">
google
</div>
</body>
</html>
3、利用float？？实测没起作用？？
<html>
<head>
<style>
.floater {
float: left;
height: 50%;
margin-bottom: -120px;
border-style: solid;
}
.content {
clear: both;
height: 240px;
position: relative;
border-style: solid;
}
</style>
</head>
<body>
<div class="floater">
<div class="content">
google
</div>
</div>
</body>
</html>
4、利用margin:atuo
<html>
<head>
<style>
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
border-style: solid;
}
</style>
</head>
<body>
<div class="content">
google
</div>
</body>
</html>参考链接：https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/