如何将父div居中到中心底部

Question

Hi&谢谢你抽出时间。

我是html和css的新手，有一个问题：

我想用html&css，我希望它是有响应的。

.container {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: center;
align-items: center;
}

<div class="container">
<div class="status" style="margin:auto;">
<img src="./icon_exm.png" class="backpack nothing">
<img src="./icon_exm.png" class="helmet nothing">
<img src="./icon_exm.png" class="vest nothing">
<div class="bullets-container">
<div class="inmag">
30
</div>
<div class="intotal">
389
</div>
</div>
<img src="./icon_exm.png" class="status nothing">
<img src="./icon_exm.png" class="healthgen nothing">
<img src="./icon_exm.png" class="lungs nothing">
</div>
<div class="health">
</div>
</div>

目前它位于中间，但我真的不知道如何将其定位在底部，感谢您的帮助：(。

Answer 1

要解决此问题，需要放置一个固定位置的容器。从底部开始，您需要设置零位置，从左边缘开始-在左中间：50%。在这种情况下，您需要补偿容器的维度，这是使用transform:transitionX(-50%(完成的。

.container {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: center;
align-items: center;
/*added*/
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

<div class="container">
<div class="status" style="margin:auto;">
<img src="./icon_exm.png" class="backpack nothing">
<img src="./icon_exm.png" class="helmet nothing">
<img src="./icon_exm.png" class="vest nothing">
<div class="bullets-container">
<div class="inmag">
30
</div>
<div class="intotal">
389
</div>
</div>
<img src="./icon_exm.png" class="status nothing">
<img src="./icon_exm.png" class="healthgen nothing">
<img src="./icon_exm.png" class="lungs nothing">
</div>
<div class="health">
</div>
</div>