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

您可以尝试使用#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 } } css

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

use strict; use warnings;

Answer 3

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

align-items和justify-content将管理X，Y轴的居中..

＆＃13;

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

＆＃13;

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

＆＃13;

修改

横向居中

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

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

您需要通过position: ~~absolute~~ relative在流程中保留一个数字，以使容器适应图像大小。

＆＃13;

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

＆＃13;

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

＆＃13;

以CSS幻灯片为中心

3 个答案:

修改