如何在不在较小屏幕上创建水平滚动的情况下将图像居中？

Question

我正在尝试使图像居中。我试过 'left: 50%'，哪种方法有效，但它通过添加水平滚动改变了页面在较小屏幕上的外观，这确实弄乱了整个页面的外观（顶部和底部 div 容器没有填满页面的宽度）。

有没有一种简单的方法可以将它居中，而不会在较小的屏幕上导致水平滚动？

.top-container {
  background:      background: -webkit-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -o-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -moz-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74     60%, #790c5a 60%);
padding-top: 5px;
padding-bottom: 30px;
text-align: center;
position: relative;
z-index: 1;
margin: auto;
width: 100vw;

}

.top-container:before {
       content: "";
       background: url("http://www.transparenttextures.com/patterns/cubes.png");
       position: absolute;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
       opacity: 0.9;
       width: 100vw;
       height: 100%;
       z-index: -1;
}

nav {
  height: 5vh;
  background: #cc0e74;
  margin-top: -20px;
  width: 100vw;
}

.photo-holder {
  position: relative;
  top: 100%;
  transform: translate(-50%, -50%) rotate(120deg);
  width: 900px;
  height: 400px;
  max-height: 900px;
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 300px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.photo-holder-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(-60deg);
  overflow: hidden;
  background: transparent;
}

.photo-holder-inner-in {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(-60deg);
  overflow: hidden;
  background-image: url("./../images/me-skye.JPG");
  background-size: contain;
  filter:hue-rotate(-75deg);
  border:1px solid #a37eba;
}

我可能忽略了一些非常简单的事情，但我很困惑，所以非常感谢任何帮助！

Answer 1

添加

overflow-x: hidden;

在 div 您想要将图像或全身标记居中的位置。它将删除水平滚动条。

如何在不在较小屏幕上创建水平滚动的情况下将图像居中？

How to center an image without creating a horizontal scroll on smaller screen?

css

center

margin

display