Css 将响应图像与页面底部中心对齐？应该使用flexbox吗？

我很不擅长CSS，在过去的一个小时里，我一直在摆弄一个响应迅速的图像，使其与页面的中心底部对齐。这真的不行。那些接近的更令人沮丧，因为它看起来正确，直到你调整它的大小

body{
  width:100%;
  height:100%;
}
.flexbox{
    display:flex;
  justify-content:center;
  align-items:flex-end; 
}
.alignbottomcenter{
  width:50%;height:50%;
  max-width:50%;max-height:50%;
  display:flex;
  justify-content:center;
  align-items:flex-end; 
  
}

---

您可以添加

高度：100vh

到

.flexbox

或图像所在的任何容器

以便将img与底部对齐 . 它必须定位为

绝对

或

固定

---

. 它的父级必须拉伸为全高

尝试将flex应用于图像本身几乎没有意义，您将无法基于此将其居中。您需要将其粘贴到flex容器中。@CBroe像这样。。。它居中，但不与页面底部对齐。它不居中，因为flex容器不高于图像本身。您还需要将其设置为100%——然后不仅是body，还有html（如果直接父级也有明确的高度，则仅百分比高度有效。）如果不使用百分比，则更容易，但改为

100vh

；您只需在此处将其应用于

.flexbox

包装器，如果图像较大且需要做出响应，该怎么办？您仍然可以为

img

元素本身设置最大宽度/高度，或任何您需要的设置。