如何用CSS将容器居中于屏幕中央及卡片代码简化建议

一、让.container_block居中显示在屏幕中央的方法 #

要实现容器水平+垂直居中，核心是确保父元素具备足够高度，以下两种方法任选其一：

方法1：Flexbox布局（推荐） #

给.container_block的父容器（比如第二页的包裹元素，假设类名为.page2）添加样式，通过Flex实现居中：

.page2 {
  height: 100vh; /* 让父容器占满当前视口高度 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

此时.container_block无需额外修改即可自动居中。如果父容器不是body，记得给它加position: relative;避免布局混乱。

方法2：绝对定位+Transform #

直接给.container_block添加定位样式，无需修改父元素：

.container_block {
  width: 80%;
  height: 40%;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 偏移自身宽高的一半实现精准居中 */
}

如果是第二页单独使用，建议给第二页容器加position: relative;，让容器相对于第二页居中，而非整个文档。

二、CSS代码简化建议 #

你的代码存在大量重复样式，可通过以下方式优化：

1. 合并重复的卡片样式 #

card1到card4的样式完全一致，给所有卡片加一个通用类（比如.card），把共同样式集中写在.card里，删除单独的card1~card4样式：

.card {
  box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
  transition: 0.3s;
  height: 30vh;
  width: 30vh;
  border-radius: 20px;
  margin: 4vh 5vh 0 0; /* 合并margin写法 */
}

HTML里把card1~card4的类统一改成card即可。

2. 使用CSS变量统一管理重复值 #

把常用重复值定义为变量，后续修改更高效：

:root {
  --card-size: 30vh;
  --card-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
  --card-radius: 20px;
  --text-color: white;
}

/* 调用变量 */
.card {
  box-shadow: var(--card-shadow);
  height: var(--card-size);
  width: var(--card-size);
  border-radius: var(--card-radius);
}

.cards h2, .cards p {
  color: var(--text-color);
  margin: 15px;
}

3. 清理冗余代码 #

• .container_block默认是块级元素，删除display: block;
• 合并文字样式，减少重复代码：

.cards h2, .cards p {
  margin: 15px;
  color: white;
}
.cards h2 {
  font-size: 25px;
}
.cards p {
  font-size: 20px;
}

4. 优化卡片布局适配 #

给.cards添加换行属性，避免小屏幕下卡片溢出：

.cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* 超出宽度自动换行 */
}

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