时间戳

首页 > 解决方案 > 无法在 flexbox 中居中 div

html - 无法在 flexbox 中居中 div

问题描述

嗨，所以我只需要一些帮助flexbox，我查看了其他人，甚至复制了那里的代码进行测试，但由于某种原因它不起作用。我正在尝试div在网站的中心顶部对齐内容。这是我当前的代码，

索引.html

<div class="header"> 
  <div class="headerContent">
    <h1>TEST<h1>
  </div>
</div

样式.css

html { 
  display: flex;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
 .headerContent {
    background-color: #2C374C; 
    width: 100%;
   justify-content: center;
}

标签： htmlcss

解决方案

我想就像这样

.header {
  width: 100%;
}
.headerContent {
  background-color: #2c374c;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
<html>
  <link rel="stylesheet" href="style.css" />
  <div class="header">
    <div class="headerContent">
      <h1>Test</h1>
    </div>
  </div>
</html>

推荐阅读