html - 居中 CSS 幻灯片

Question

我有一个 CSS 幻灯片，目前是左对齐的，我正试图在页面中居中。以前我有一个跨越整个页面的幻灯片并且效果很好，但这次图像只占据页面的一部分，并且在水平和垂直照片之间混合(都具有相同的高度)。如果有人可以指导我如何将此幻灯片与我的页面中心对齐，我将不胜感激。我尝试了许多不同的调整，但没有运气。我在下面粘贴我的代码。 提前谢谢你。

HTML

#history_slideshow {
  padding-top: 1%;
}

.crossfade2>figure {
  animation: imageAnimation 27s linear infinite 0s;
  backface-visibility: hidden;
  color: transparent;
  opacity: 0;
  position: absolute;
  z-index: 0;
  margin: 0 auto;
  padding-top: 0%;
}

.crossfade2>figure:nth-child(1) {
  background-image: url('../photos/history_1.jpg');
  background-repeat: no-repeat;
}

.crossfade2>figure:nth-child(2) {
  animation-delay:6s;
  background-image:url('../photos/history_2.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(3){
  animation-delay:12s;
  background-image:url('../photos/history_3.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('../photos/history_4.jpg');
  background-repeat: no-repeat;
}

@keyframes imageAnimation {
  0% {
    animation-timing-function:ease-in;
    opacity:0;
  }
  8% {
    animation-timing-function:ease-out;
    opacity:1;
  }
  17% {
    opacity:1
  }
  25% {
    opacity:0
  }
  100% {
    opacity:0
  }
}

<div id="history_slideshow" class="crossfade2">
  <figure>
    <img src="../photos/history_1.jpg" alt="" />
  </figure>
  <figure>
    <img src="../photos/history_2.jpg" alt="" />
  </figure>
  <figure>
    <img src="../photos/history_3.jpg" alt="" />
  </figure>
  <figure>
    <img src="../photos/history_4.jpg" alt="" />
  </figure>
</div>

Answer 1

你可以在父容器上使用display:flex + height:100vh，一个min-height/min-width可以是明智的当整个内容处于绝对位置时。

align-items 和 justify-content 将管理在 X、Y 轴上居中。

#history_slideshow {
  padding-top: 1%;
  /* update */
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  /* could be usefull */
  min-height:400px;
  min-width:600px;
  /* end update */
}

.crossfade2>figure {
  animation: imageAnimation 27s linear infinite 0s;
  backface-visibility: hidden;
  color: transparent;
  opacity: 0;
  position: absolute;
  z-index: 0;
  margin: 0 auto;
  padding-top: 0%;
  
}

.crossfade2>figure:nth-child(1) {
  background-image: url('http://dummyimage.com/200x400/acd&text=history_1.jpg');
  background-repeat: no-repeat;
}

.crossfade2>figure:nth-child(2) {
  animation-delay:6s;
  background-image:url('http://dummyimage.com/600x400/afd&text=history_2.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(3){
  animation-delay:12s;
  background-image:url('http://dummyimage.com/200x400/0cd&text=history_3.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('http://dummyimage.com/600x400/456&text=history_4.jpg');
  background-repeat: no-repeat;
}

@keyframes imageAnimation {
  0% {
    animation-timing-function:ease-in;
    opacity:0;
  }
  8% {
    animation-timing-function:ease-out;
    opacity:1;
  }
  17% {
    opacity:1
  }
  25% {
    opacity:0
  }
  100% {
    opacity:0
  }
}

<div id="history_slideshow" class="crossfade2">
  <figure>
    <img src="http://dummyimage.com/200x400/acd&text=history_1.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/600x400/afd&text=history_2.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/200x400/0cd&text=history_3.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/600x400/456&text=history_4.jpg" alt="" />
  </figure>
</div>

---

编辑

水平居中

您可以在父容器上使用display + margin。

display:table; 会缩小内容大小，然后水平居中的 margin:auto 就可以了。

您需要通过position:absoluterelative 来保持流中的单个图形，让容器适应图像大小。

#history_slideshow {
  padding-top: 1%;
  /* update for horizontal centering */
  display:table;
  margin:auto;
  }
  
  .crossfade2>figure:first-of-type {
  position:relative;
}
  /* end update */


.crossfade2>figure {
  animation: imageAnimation 27s linear infinite 0s;
  backface-visibility: hidden;
  color: transparent;
  opacity: 0;
  position: absolute;
  z-index: 0;
  margin: 0 auto;
  padding-top: 0%;
}

.crossfade2>figure:nth-child(1) {
  background-image: url('http://dummyimage.com/300x200/acd&text=history_1.jpg');
  background-repeat: no-repeat;
}

.crossfade2>figure:nth-child(2) {
  animation-delay:6s;
  background-image:url('http://dummyimage.com/300x200/afd&text=history_2.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(3){
  animation-delay:12s;
  background-image:url('http://dummyimage.com/300x200/0cd&text=history_3.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('http://dummyimage.com/300x200/456&text=history_4.jpg');
  background-repeat: no-repeat;
}

@keyframes imageAnimation {
  0% {
    animation-timing-function:ease-in;
    opacity:0;
  }
  8% {
    animation-timing-function:ease-out;
    opacity:1;
  }
  17% {
    opacity:1
  }
  25% {
    opacity:0
  }
  100% {
    opacity:0
  }
}

<div id="history_slideshow" class="crossfade2">
  <figure>
    <img src="http://dummyimage.com/300x200/acd&text=history_1.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/300x200/afd&text=history_2.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/300x200/0cd&text=history_3.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/300x200/456&text=history_4.jpg" alt="" />
  </figure>
</div>