仅使用css

Question

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

＆＃13;

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我建议给.overlay <div> flexbox layout 而不是表格。然后，您只需将三个规则应用于父级即可使图像居中：

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

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

这可以在以下示例中看到：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）

Answer 2

在顶部和底部使用填充

.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" />