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。

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

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

示例：

1. max-widthmax-height
>，

<code class="html"><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></code>

和
類可確保該空間內圖像的垂直和水平核心。請記住，將
2. 替換為圖像的實際路徑。 object-fit>當將其垂直居中在引導div中時，我如何防止圖像溢出？為了防止這種情況，您需要控製圖像大小。 以下是幾種方法： object-fit: contain;object-fit: cover;
set

<code class="html"><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></code>

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中文網其他相關文章！