html代码底对齐父级

在HTML中，我们常常需要将子元素底部对齐其父级元素。然而，默认情况下，子元素是在父级元素内按顺序顶部对齐排列的。这时，我们需要使用一些技巧使子元素底对齐其父级元素。

父级元素 {
  position: relative;
  display: flex;
  justify-content: center; /* 可选 */
  align-items: flex-end;
}

子元素 {
  position: absolute;
  bottom: 0;
}

首先，我们要确保父级元素的position属性为relative。然后，通过设置display: flex来使子元素可自由定位，再利用justify-content: center和align-items: flex-end将其水平和垂直居中。需要注意的是，这里的垂直居中方式是flex-end而不是默认的center。最后，设置子元素的position属性为absolute并将bottom属性设置为0即可。

该方法适用于任何情况下的子元素底部对齐其父级元素的需求，如文本、图片等。这个技巧不仅简单易懂，而且兼容性也很好，可应用于大多数浏览器。