使用Flexbox无法垂直对齐div的问题求助

你的代码问题很明确，核心是flex容器.holder没有足够高度，同时缺少水平居中的配置，导致垂直对齐不生效。

修复后的完整代码 #

CSS（mycool.css）

html, body {  
  height: 100%;
  margin: 0;
  background-color: gray;
}

.holder { 
  display: flex;
  align-items: center; /* 控制垂直方向对齐 */
  justify-content: center; /* 控制水平方向对齐 */
  height: 100%; /* 让容器占满父元素的全部高度 */
}

.box {
  background-color: brown;
  width: 100px;
  height: 100px;
  border: 3px solid white;
}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Under construction</title>
    <link rel="stylesheet" href="mycool.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="holder">
<div class="box"></div>
</div>
</body>
</html>

关键修复点说明 #

1. 给html、body设置高度：默认情况下，html和body的高度只会包裹内部内容，不会自动铺满浏览器视口。设置height:100%并清除默认外边距margin:0，才能让后续的容器高度设置生效。
2. 给.holder设置高度：flex容器的align-items:center是基于容器自身高度实现垂直对齐的，如果容器高度只和内部盒子一样高，垂直对齐就看不出效果。设置height:100%让容器铺满整个视口高度。
3. 添加水平居中配置：原来的代码只做了垂直对齐，加上justify-content:center就能同时实现水平居中。

内容的提问来源于stack exchange，提问作者hampta