杰拉斯的博客
[CSS3] 纯 CSS 实现未知高度垂直居中
杰拉斯 | 时间:2015-12-17, Thu | 26,157 views前端开发
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯CSS实现未知高度垂直居中</title>
<style>
.outer {
font-size: 0;
height: 200px;
background: #0099ff;
white-space: nowrap;
}
.outer:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.inner {
font-size: 14px;
white-space: normal;
display: inline-block;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
第一行<br>第二行<br>第三行
</div>
</div>
</body>
</html>