1.内容为纯文字的时候的垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知高度垂直居中</title>
<style type="text/css">
.box{width: 200px;height: 500px;background-color: yellow;}
.box:before{content:"我是备胎";width: 0;height: 100%;display: inline-block;vertical-align: middle;}
.boxWrap{display: inline-block;vertical-align: middle;}
</style>
</head>
<body>
<div class="box">
<div class="boxWrap">
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
</div>
</div>
</body>
</html>
解释：也许你会想到vertical-align属性，但是vertical-align是需要有参照物的，如果直接给他vertical-align：middle是不行的
所以，这就是为什么加content："";的原因，给内容一个参照物就可以轻松居中了。当然还需要用到display：inline-block;属性因为没有这个属性的话他们就不能在一行显示，更别谈参照垂直居中了。
2.先看看box套box吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知高度垂直居中</title>
<style type="text/css">
.box{width: 200px;height: 500px;background-color: yellow;font-size: 0;text-align: center;}
.box:before{content:"";width: 0;height: 100%;display: inline-block;vertical-align: middle;font-size：14px;}
.boxWrap{display: inline-block;vertical-align: middle;font-size: 14px;background-color: #000;width: 100px;height: 100px;}
</style>
</head>
<body>
<div class="box">
<div class="boxWrap"></div>
</div>
</body>
</html>
3.内容是多种混合
先上一个有意思的bug
只需要在父级上加个font-size：0；即可。
当然罪魁祸首是这个display：inline-block；
因为父级的默认font-size导致两个div之间有间隙，所以把旁边的div挤下去了。
请看下图
好了，进入正题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知高度垂直居中</title>
<style type="text/css">
.box{width: 200px;height: 500px;background-color: yellow;font-size: 0}
.box:before{content:"";width: 0;height: 100%;display: inline-block;vertical-align: middle;font-size：14px;}
.boxWrap{display: inline-block;vertical-align: middle;font-size: 14px;}
.box1{width: 300px;height: 200px;}
</style>
</head>
<body>
<div class="box">
<div class="boxWrap">
<h1>我是他们的头头</h1>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRXP8QWhU1KHIEwr7ULQevzAOLNXw4EOdrqvh6eNUURZqjz4on_sQ" style="width: 100%;">
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
快让我垂直居中，混蛋！<br>
</div>
</div>
</body>
</html>
时间： 2024-08-07 21:19:45