在两个父元素之间包装所有元素

，可以使用CSS的flexbox布局或者grid布局来实现。

1. Flexbox布局： Flexbox是一种用于页面布局的CSS3模块，它提供了一种灵活的方式来排列、对齐和分布元素。通过设置父元素的display属性为flex，可以创建一个flex容器。然后，通过设置flex容器的flex-direction属性来指定元素的排列方向（水平或垂直）。最后，使用flex容器的justify-content和align-items属性来对齐和分布元素。

示例代码：

<div class="parent">
  <div class="child">元素1</div>
  <div class="child">元素2</div>
  <div class="child">元素3</div>
</div>

.parent {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}
.child {
  /* 子元素样式 */
}

推荐的腾讯云相关产品：腾讯云云服务器（CVM） 产品介绍链接地址：https://cloud.tencent.com/product/cvm

1. Grid布局： Grid布局是CSS3中的另一种强大的布局系统，它允许将页面划分为行和列，并通过将元素放置在网格单元中来控制布局。通过设置父元素的display属性为grid，可以创建一个grid容器。然后，使用grid容器的grid-template-rows和grid-template-columns属性来定义行和列的大小。最后，使用grid容器的grid-row和grid-column属性来指定元素在网格中的位置。

示例代码：

<div class="parent">
  <div class="child">元素1</div>
  <div class="child">元素2</div>
  <div class="child">元素3</div>
</div>

.parent {
  display: grid;
  grid-template-rows: 1fr; /* 定义一行 */
  grid-template-columns: 1fr 1fr 1fr; /* 定义三列 */
  justify-items: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}
.child {
  /* 子元素样式 */
}

推荐的腾讯云相关产品：腾讯云云原生容器服务（TKE） 产品介绍链接地址：https://cloud.tencent.com/product/tke