如何将<center>内容置于含min-height的div底部？附尝试代码求简化方案

嘿，你的尝试方向没问题，但默认块级元素的布局规则下，vertical-align和bottom属性没法直接生效哦。这里有几个更简洁靠谱的实现方案，还能顺便替换掉已经废弃的<center>标签：

1. Flexbox布局（最推荐，现代浏览器首选） #

Flexbox是目前布局的最优解，代码少、逻辑清晰，还能同时搞定垂直靠底和水平居中：

.minh { 
  min-height:70px; 
  border:1px solid #f00;
  display: flex;
  align-items: flex-end; /* 垂直方向靠底 */
  justify-content: center; /* 水平方向居中 */
}

对应的HTML可以简化成：

<div class="minh">
  This goes to bottom
</div>

不需要额外嵌套标签，一步到位。

2. Grid布局（同样简洁，适合复杂场景） #

Grid布局也是现代浏览器支持的方案，写法同样直观：

.minh { 
  min-height:70px; 
  border:1px solid #f00;
  display: grid;
  align-items: end; /* 垂直靠底 */
  justify-items: center; /* 水平居中 */
}

HTML和上面完全一样，不需要额外元素。

3. 兼容老浏览器的绝对定位方案 #

如果需要兼容IE8这类老旧浏览器，可以用绝对定位的方式：

.minh { 
  min-height:70px; 
  border:1px solid #f00;
  position: relative; /* 父元素设相对定位，作为子元素定位的参考 */
}
.btm { 
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center; /* 水平居中 */
}

HTML结构：

<div class="minh">
  <div class="btm">This goes to bottom</div>
</div>

另外提醒下：<center>标签在HTML5里已经被废弃了，建议用CSS的text-align:center来实现水平居中，更符合现代网页标准哦。

内容的提问来源于stack exchange，提问作者AGamePlayer