Flexbox 居中对齐未按预期工作

Question

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

Answer 1

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

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

Flexbox 居中对齐未按预期工作

Flexbox centre aligning does not work as expected

html

css

tailwind-css