如何在较小的屏幕上居中放置图像而不创建水平滚动条？

debugcn 发表于 Dev

米卡拉多杜拉

我正在尝试使图像居中。我尝试使用“ 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;
}

我可能忽略了一些非常简单的事情，但是我很固执，所以任何帮助将不胜感激！

R·K

加