如何在1个视图居中的情况下并排布局4个视图

在一个视图居中的情况下并排布局4个视图，可以使用以下方法：

1. 使用Flexbox布局：Flexbox是一种弹性盒子布局模型，可以轻松实现视图的居中和并排布局。首先，将父容器设置为flex布局，并使用justify-content和align-items属性将子视图居中。然后，将子视图的flex属性设置为1，使它们平均分配父容器的宽度。

示例代码：

<div style="display: flex; justify-content: center; align-items: center;">

 <div style="flex: 1;">视图1</div>

 <div style="flex: 1;">视图2</div>

 <div style="flex: 1;">视图3</div>

 <div style="flex: 1;">视图4</div>

</div>

1. 使用Grid布局：Grid布局是一种二维网格布局模型，可以更精确地控制视图的位置和大小。首先，将父容器设置为grid布局，并使用justify-items和align-items属性将子视图居中。然后，使用grid-template-columns属性将父容器分为4列，并使用grid-column属性将每个子视图放置在相应的列中。

示例代码：

<div style="display: grid; justify-items: center; align-items: center; grid-template-columns: repeat(4, 1fr);">

 <div style="grid-column: 1;">视图1</div>

 <div style="grid-column: 2;">视图2</div>

 <div style="grid-column: 3;">视图3</div>

 <div style="grid-column: 4;">视图4</div>

</div>

1. 使用绝对定位：将父容器设置为相对定位，然后将每个子视图设置为绝对定位，并使用top、bottom、left、right属性将它们放置在父容器的中心位置。

示例代码：

<div style="position: relative; width: 100%; height: 100%;">

 <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">视图1</div>

 <div style="position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%);">视图2</div>

 <div style="position: absolute; top: 50%; left: 75%; transform: translate(-50%, -50%);">视图3</div>

 <div style="position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%);">视图4</div>

</div>

以上是在一个视图居中的情况下并排布局4个视图的方法。根据具体需求和使用场景，选择适合的布局方式即可。