使用Flexbox无法垂直居中.card-both于.card-top容器的问题

你的.card-top是Flex容器且设置了flex-direction: column，此时Flex的主轴为垂直方向，要让子元素.card-both垂直居中，只需给.card-top添加justify-content: center；如果需要水平方向也居中，再补充align-items: center。修改后的.card-top CSS如下：

.card-top {
  display: flex;
  flex-direction: column;
  height: 50vh;
  width: 100%;
  background-color: #1F2937;
  justify-content: center; /* 垂直居中（主轴方向） */
  align-items: center;     /* 水平居中（交叉轴方向） */
}

调整后.card-both就能在.card-top容器内实现垂直+水平的居中效果，匹配你的预期示意图。

HTML部分 #

1. ul子元素不符合规范：<ul>的直接子元素只能是<li>，你在<ul>里嵌套了<div class="header-logo">，违反HTML结构规则。正确写法是把类加到<li>上：

   <ul>
     <li class="header-logo">Header Logo</li>
     <li>header link one</li>
     <li>header link two</li>
     <li>header link three</li>
   </ul>
   

2. 多余的闭合标签：.card-mid结束后多了一个</div>，会导致DOM结构异常，需删除。
3. 语义化缺失：名人名言部分应使用<blockquote>标签替代普通<div>，更符合HTML语义化要求，示例：

   <blockquote class="inspiring-text">
     <p>Everything suits me that suits your designs, O my universe. Nothing is too early or too late for me that is in your own good time. All is fruit for me that your seasons bring, O nature. All proceeds from you, all subsists in you, and to you all things return.</p>
     <cite>- Marcus Aurelius</cite>
   </blockquote>
   

CSS部分 #

1. 无效注释格式：CSS的标准注释语法是/* 注释内容 */，你使用了JS的//注释，会导致代码解析错误（比如你注释的.separate类那段），请统一使用CSS规范注释。
2. Flex属性冗余冲突：.box中同时设置了flex: 0 0 100px和flex-basis: auto，flex缩写的第三个值就是flex-basis，后者会覆盖前者的设置，属于冗余且冲突代码，需删除flex-basis: auto；另外flex-wrap: wrap仅对Flex容器生效，.box不是容器，该属性无效，也应删除。
3. 未使用的冗余代码：.text-mid-wrapper类在CSS中定义，但HTML里没有任何元素使用它，属于无效代码，建议删除。
4. 样式重复与可维护性：两个按钮.sign-up-top和.sign-up-bot可以通过共享类统一样式，避免重复代码，比如给它们都加btn-sign-up类：

   .btn-sign-up {
     width: 80px;
     /* 其他统一样式，比如背景色、边框等 */
   }
   

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