Html Flexbox中心对齐未按预期工作

我正在尝试使用flex box将div底部的三角形居中对齐。我以前使用的方法没有按预期工作。我也在使用Tailwindcss，但您仍然可以看到下面的CSS代码

 <div class="flex-col items-center mb-20 h-64">
        <div class="bg-yellow-300 w-full h-56">
         </div>
        <div class="arrow-down">
        </div>
    </div>

---

要使三角形居中，请为

向下箭头
类添加规则
边距：0 auto 0 auto


.flex col{
弯曲方向：立柱；
}
.项目中心{
对齐项目：居中；
}
.bg-yellow-300{
背景色：#808080；
}
.向下箭头{
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：20px实心透明；
边框顶部：20px实心#f00；
边距：0自动0自动；
}
.h-56{
高度：14rem；

谢谢Sergey！效果很好如果我的答案对你有帮助，请勾选我答案左边的框。很高兴提供帮助：）我忘了告诉你…你有一个
flex-col
类，在css中你没有点指定它。你有这样的
flex-col
，但你需要这样的
.flex-col
。好的地方！再次感谢
flex-col {
  flex-direction: column;
}

.items-center {
    align-items: center;
    
}

.bg-yellow-300 {
   background-color: #808080;
 
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    
    border-top: 20px solid #f00;
  }

.h-56 {
    height: 14rem;
}