我从 MDN flexbox 文档中复制代码来测试窗口中框的垂直对齐方式:
为什么盒子没有垂直对齐？我使用 Google Chrome 63.0.3239.108(官方版本)(64 位)，操作系统 Ubuntu 16.04，JavaScript V8 6.3.292.48
.box {
display: flex;
align-content: center;
justify-content: center;
}
.box div {
width: 100px;
height: 100px;
border: 1px solid black;
}<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="./pers.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>最佳答案
首先，它不是align-content，而是它的align-items。其次，您需要为父元素指定高度，以便其内容位于中心。希望以下代码片段对您有用。
html, body{
height: 100%;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.box div {
width: 100px;
height: 100px;
border: 1px solid black;
}<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="./pers.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>谢谢
关于html - 为什么垂直对齐 flexbox (1 :1 copy of MDN example) not working in Chrome?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49219435/