两个div在一个div里面上下等分显示的css样式

要在CSS中实现一个div内部有两个div，上部分和下部分各自占据一半高度的垂直居中效果，你可以使用Flexbox布局或者Grid布局。以下是两种方法的示例：

**1. 使用Flexbox布局**

.parent-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 上部元素开始对齐 */
}

.child-top {
  flex: 0 0 calc(50% - padding); /* 上半部分占50%，减去内边距 */
  background-color: #f0f0f0; /* 任意颜色作为示例 */
}

.child-bottom {
  flex: 0 0 calc(50% - padding); /* 下半部分占50%，减去内边距 */
  background-color: #eaeaea; /* 另一颜色 */
}

在这个例子中，`.parent-container`是包含这两个子div的容器，`.child-top`和`.child-bottom`分别代表上半部分和下半部分。

**2. 使用Grid布局**

.parent-container {
  display: grid;
  place-items: center; /* 上下居中 */
  grid-template-columns: 1fr; /* 单列，自适应宽度 */
  gap: 1rem; /* 子元素间距 */
}

.child-top {
  height: 50%; /* 上半部分占50%高度 */
  background-color: #f0f0f0;
}

.child-bottom {
  height: 50%; /* 下半部分占50%高度 */
  background-color: #eaeaea;
}

这里同样设置了`.parent-container`为grid容器，并设置了两行自动填充整个容器高度。