使用方法:在添加固定的div和flex框的下方垂直居中

在实现垂直居中的布局中，可以使用以下方法：

1. 使用CSS的flex布局：
   • 在父容器上添加display: flex;和justify-content: center;属性，使子元素水平居中。
   • 在父容器上添加align-items: center;属性，使子元素垂直居中。

示例代码：

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

 <!-- 垂直居中的内容 -->

</div>

1. 使用CSS的绝对定位和transform属性：
   • 将父容器设置为相对定位position: relative;。
   • 在子元素上添加position: absolute;和top: 50%;属性，将子元素的顶部定位到父容器的中间位置。
   • 使用transform: translateY(-50%);将子元素向上移动自身高度的一半，实现垂直居中。

示例代码：

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

 <div style="position: absolute; top: 50%; transform: translateY(-50%);">

   <!-- 垂直居中的内容 -->

 </div>

</div>

以上两种方法都可以实现垂直居中的效果。在实际开发中，可以根据具体情况选择适合的方法。