Chrome中min-height配合flexbox的align-items:center无法垂直居中的解决问询

在Chrome浏览器中，当<fieldset>作为flex容器并设置min-height时，align-items:center无法让内部元素垂直居中，仅设置固定height时生效，但Firefox无此问题。针对这个兼容性问题，提供两种可行的解决方法：

方法一：嵌套内部flex容器 #

通过在<fieldset>内部添加额外div作为flex容器，将原有的flex布局属性转移到这个div上，<fieldset>仅负责基础样式和min-height设置。

修改后的HTML #

<fieldset class="container_difficulty container">
  <legend class="legend">Difficulty</legend>
  <div class="flex-inner">
    <div>
      <input type="radio" id="easy" name="difficulty" value="easy">
      <label class="button" for="easy">Easy</label>                  
    </div>
    <div>
      <input type="radio" id="medium" name="difficulty" value="medium" checked> 
      <label class="button" for="medium">Medium</label>                                 
    </div>
    <div>
      <input type="radio" id="hard" name="difficulty" value="hard">
      <label class="button" for="hard">Hard</label>                  
    </div>
  </div>
</fieldset>

修改后的CSS #

.container{    
  position: relative;
  width: 50%;
  min-height: 20vh;
  background-color: hsl(0 50% 0% / .5);
  border: 1px solid hsl(0 0% 60% / .5);
  border-radius: 7px;
  box-shadow: 0 0 8px 0 hsla(236, 19%, 48%, 0.249);
  margin: 1.5em auto;
  padding: 1em;
  padding-top: 2em;
  text-align: center;
}
.flex-inner {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  height: 100%;
}

方法二：改用Grid布局 #

Grid布局在处理min-height容器的垂直居中时兼容性更稳定，无需额外嵌套元素，直接替换flex布局属性即可：

修改后的CSS #

.container{    
  position: relative;
}
fieldset.container{
  width: 50%;
  min-height: 20vh;
  background-color: hsl(0 50% 0% / .5);
  border: 1px solid hsl(0 0% 60% / .5);
  border-radius: 7px;
  box-shadow: 0 0 8px 0 hsla(236, 19%, 48%, 0.249);
  margin: 1.5em auto;
  padding: 1em;
  padding-top: 2em;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, min-content);
  justify-content: space-evenly;
  align-items: center;
  gap: .5rem;
}

问题原因 #

这是Chrome对<fieldset>元素的渲染特性导致的兼容性问题：<fieldset>作为表单元素，默认盒模型与普通块元素存在差异，Chrome在计算flex容器的可用高度时，不会将min-height纳入考量，因此align-items:center无法生效；而Firefox对该元素的min-height计算逻辑与flex布局的适配更完善。

内容的提问来源于stack exchange，提问作者Andrea de Martinis