CSS Flex 布局实现父元素中垂直居中子元素（高度和宽度不确定）

可以使用 flex 布局来实现，具体步骤如下：

1. 在父元素上设置 display: flex; 和 align-items: center;，使其成为一个 flex 容器，并将子元素垂直居中。
2. 子元素的高度和宽度设置为 auto，即不确定大小。
3. 如果需要子元素水平居中，可以再设置 justify-content: center;。

示例代码如下：

HTML：

<div class='parent'>
  <div class='child'></div>
</div>

CSS：

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: #eee;
}

.child {
  height: auto;
  width: auto;
  background-color: #ccc;
}

在上述示例中，父元素高度为 300px，子元素的高度和宽度都设置为 auto，且通过 flex 布局使子元素垂直和水平居中。