Flexbox中心对齐无法按预期进行

问题描述

我正在尝试使用flex框使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>

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;
}

Codepen link

解决方法

要使三角形居中，请为margin: 0 auto 0 auto类添加规则arrow-down。

.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;
    margin: 0 auto 0 auto;
  }

.h-56 {
    height: 14rem;

 <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>