将照片居中

Question

嘿，我不知道如何使这张照片居中。正如你所看到的，它略有偏移，我想并排制作几个带有中断的 div 并添加照片，但不幸的是它们没有完全居中。

对于未来如何在 css 文件中将图像很好地居中，我希望得到一些建议。

.Photos {
  color: black;
  display: table;
  width: 100%;
  height: 450px;
}

.photo1 {
  display: inline-block;
  width: 25%;
  height: 450px;
  background-size: cover;
  margin-left: 30px;
  background-image: url(https://optimagas.com/blog/bl-content/uploads/pages/e931fad50039f497fa1b5438c6cd89c9/gazziemny.jpg);
}

<section class="Photos">
  <div class="photo1">fsgfsd</div>
</section>

Answer 1

只需使用 flex 将元素内的内容对齐到中心

.Photos {
  color: black;
  display: flex;
  justify-content: center;
  height: 450px;
}

您也可以使用边距做同样的事情

.Photos {
  color: black;
  margin: 0 auto;
  height: 450px;
}