我遇到了使文本显示在网页中间（高度方向）的问题。该网站的HTML是：
<html lang="en">
<head>
<title>example</title>
<link href="example.css" rel="stylesheet">
</head>
<body>
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
</body>
</html>
我想做的是让home-container元素一直延伸到页面底部，并在页面text that should be in the middle中间。我的css样子是：
html, body{
height:100%;
}
.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
}
.home-row{
vertical-align: middle;
}
我知道，如果我做home-container这样的话，我想做的事情是可能的：
.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
align-items: center;
display: flex;
}
但这不适用于所有浏览器。我在做错什么vertical-align物业？在我的示例中，Id并没有真正做任何事情...
尝试这个：
<style>
.home-container {
width: 100%;
height: 800px;
background-color: rgba(139, 0, 0, 0.4);
text-align: center;
}
.some-other-class {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
HTML
<div class="home-container">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
html, body{
height:100%;
margin: 0;
}
.home-container{
width: 100%;
height: 100%;
display: table;
text-align: center;
background-color: rgba(139,0,0,0.4);
}
.home-row{
display: table-cell;
vertical-align: middle;
}<html lang="en">
<head>
<title>example</title>
<link href="example.css" rel="stylesheet">
</head>
<body>
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
</body>
</html>在使用vertical-align:middle添加display:table-cell上.home-row和display:table上.home-container
看到这里jsfiddle
代码：
.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
display:table;
}
.home-row{
vertical-align: middle;
display:table-cell;
}
该垂直对齐 CSS属性指定内嵌或表格盒的垂直对准。
在此处了解更多信息垂直对齐