CSS使用flex布局垂直居中水平居中问题

body{
    /* 渐变色 */
    background-image: linear-gradient(
        0deg,
        rgba(247, 247, 247, 1) 23.8%,
        rgba(252, 221, 221, 1) 92%
      );
      /* height: 100%; */
      /* vh整个视窗的高度 ,100vh相当于整个视口的高度*/
      height: 100vh;   
      display: flex;
      /* 竖直方向排列 */
      flex-direction: column; 
      /* 交叉轴居中 */
      /* 注意这边设置了排序方向往下,设置垂直居中效果是竖排居中的 */
      align-items: center;
      justify-content: center;
}

当使用flex布局中,设置竖直方向排序,设置水平居中效果为竖直居中

设置竖直居中效果为水平居中

具体bug还没找到