仅使用css在div中垂直居中图像[重复]

Posted 2023-03-05

【中文标题】仅使用css在div中垂直居中图像[重复]

【英文标题】：Center image vertically in div using only css [duplicate]

【发布时间】：2018-03-28 13:49:38

【问题描述】：

我正在尝试将包含在显示设置为表格的 div 中的图像居中。在其中，我希望显示一个图像，它应该位于垂直和水平的中心。我已经使用 margin:auto 实现了水平位置并将其设置为 display: table-cell，但它没有垂直居中。任何帮助都会很棒

.overlay  height: 50%; background: red;position: fixed;
top: 0;
left: 0;
height: 50%;
width: 100%;
display: table;
.swipe height: 80px;
display: table-cell;
margin: auto;

<div style="height:300px">
<div class="overlay">
   <img class="swipe" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />

【参考方案1】：

在顶部和底部使用填充

.overlay  background: red; position: fixed;
top: 0;
left: 0;
padding: 5% 0 5% 0;
width: 100%;
display: table;
.swipe height: 80px;
display: table-cell;
margin: auto;

<div style="height:300px">
<div class="overlay">
   <img class="swipe" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />

【参考方案2】：

我建议给 .overlay <div> 一个 flexbox layout 而不是一张桌子。然后您可以通过简单地将三个规则应用于父级来使图像居中：

.overlay 
  display: flex;
  align-items: center;
  justify-content: center;

请注意，.swipe 上不再需要 display: table-cell 或 margin: auto。

这可以在下面的例子中看到：

.overlay 
  height: 50%;
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;


.swipe 
  height: 80px;

<div style="height:300px">
  <div class="overlay">
    <img class="swipe" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />
  </div>
</div>

希望这会有所帮助！ :)