居中 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

我想你可以通过添加
来居中 <div> margin: 0 auto
width:auto
display : inline-block

用这个答案检查你的代码。

Answer 2

您可以尝试使用 transform css

#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%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

.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
  }
}
@-webkit-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
  }
}
@-moz-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 3

你可以在父容器上使用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:~~absolute~~relative在流中保留单个图，让容器适应图像大小。

#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>

居中 CSS 幻灯片放映

Centering CSS Slideshow

html

css

slideshow

centering

编辑