Bootstrap如何让图片在div中垂直居中

>在引导div中以图像为中心：全面的指南

>

>本文介绍了在引导div中垂直居中的图像的各个方面，探索不同的技术及其效率。

>>

1. bootstrap：如何在div中垂直将图像中心置于图像中？ Flexbox。 Bootstrap 4和5很容易支持Flexbox，使其成为干净有效的解决方案。 以下方法： d-flexalign-items-center>将flexbox应用于父div：d-flex向您的Div添加类align-items-center>。
启用Flexbox布局，
2. 垂直将项目集中在Flex容器中。 auto确保图像具有定义的高度：
Flexbox中心项目基于其固有的大小。如果您的图像没有固定的高度（例如，将其设置为
3. ），则可能无法正确居中。 考虑设置特定的高度或使用纵横比技术（在后面讨论）。justify-content-center
>可选：合理内容：

如果您也想水平将图像集中，请在您的div。

<div class="d-flex align-items-center justify-content-center" style="height: 200px;">
  <img src="your-image.jpg" alt="Your Image">
</div>

d-flexalign-items-centerjustify-content-center"your-image.jpg"示例中添加

<> <>

示例：

1. max-widthmax-height
<🎜

>，

<div class="d-flex align-items-center justify-content-center" style="height: 200px;">
  <img src="your-image.jpg" alt="Your Image" style="max-width: 100%; max-height: 100%;">
</div>

和

类可确保该空间内图像的垂直和水平核心。请记住，将
2. 替换为图像的实际路径。object-fit>当将其垂直居中在引导div中时，我如何防止图像溢出？为了防止这种情况，您需要控制图像大小。 以下是几种方法： object-fit: contain;object-fit: cover;

set

<div class="d-flex align-items-center justify-content-center" style="height: 200px;">
  <img src="your-image.jpg" alt="Your Image" style="object-fit: contain;">
</div>

and

：
3. 这在保持其长宽比的同时限制了图像大小。 将其与上面的Flexbox方法结合在一起：

>使用

：

：此css属性控制如何调整图像大小以适合其容器。 >将扩展图像以适合容器内的纵横比，并可能添加信箱（空空间）。 >将缩放图像以完全覆盖图像的一部分。是否存在最有效的？

1. flexbox（推荐）：>如上所述，这是干净，简洁的，并且得到了广泛支持。
网格布局：
3. 类似于flexbox，网格，网格提供强大的布局功能，提供了强大的布局功能，并且也可以实现垂直中心。但是，对于此特定任务，Flexbox通常更简单。 transform: translateY(-50%);绝对定位和转换：
这涉及绝对将图像定位在其父级内，然后使用垂直将其居中。 与FlexBox相比，这效率较低，需要更多的手动计算。 它还需要父母容器的特定高度和宽度。

基于表的布局（不推荐）：

这是一种过时的技术，应避免使用flexbox或grid的现代布局方法。 JavaScript？

是的，上面描述的Flexbox方法是纯CSS解决方案。 它不需要任何JavaScript。 使用object-fit处理溢出也是一种纯CSS方法。 因此，您可以有效地实现垂直的图像中心，而无需诉诸JavaScript。

以上是Bootstrap如何让图片在div中垂直居中的详细内容。更多信息请关注PHP中文网其他相关文章！