如何让DIV中的A、B、C、D四个子元素保持水平和垂直对齐？

可以使用CSS的Flexbox布局来实现DIV中的A、B、C、D四个子元素保持水平和垂直对齐。具体步骤如下：

1. 父元素设置display: flex;，使其成为一个Flex容器。
2. 设置justify-content: center;和align-items: center;使Flex容器内的子元素在水平和垂直方向上居中。
3. 子元素设置flex: 1;，使其在Flex容器内平均分配可用的空间。

以下是示例CSS代码：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  flex: 1;
}

在HTML中，DIV应该包含A、B、C、D四个子元素，如下所示：

<div class="parent">
  <div class="child">A</div>
  <div class="child">B</div>
  <div class="child">C</div>
  <div class="child">D</div>
</div>

这样，A、B、C、D四个子元素就会保持水平和垂直对齐了。