如何将此幻灯片显示移动到页面中央（水平）？

Question

我已经对先前的问题尝试过多个答案，但似乎无法找出如何将幻灯片放到页面中央（水平）。如果我尝试使用text-align：center;它不起作用。我的HTML和CSS不够好，因此可以提供任何帮助。 幻灯片的大小不错，但位置必须居中，而不是页面的左上方。填充似乎也不起作用。

Slider{
  display: block;
  width:90%;
  height:92%;
  background-color: #0AF8B3;
  overflow: hidden;
  position: absolute;
  border: 2px solid red;
}

Slider > * {
    position: absolute;
    display: block;
    width:100%;
    height:100%; 
    background: #FF8000;
    animation: slide 12s infinite;
    overflow: hidden;
}

Slide:nth-child(1) {
    left: 0%;
    animation-delay: -1s;
    background-image: url(Here's a link);
    background-size: cover;
    background-position: center;
}

Slide:nth-child(2) {
    animation-delay: 2s;
    background-image: url(Here's a link);
    background-size: cover;
    background-position: center;
}

Slide:nth-child(3) {
    animation-delay: 5s;
    background-image: url(Here's a link);
    background-size: cover;
    background-position: center;
}

Slide:nth-child(4) {
    left: 0%;
    animation-delay: 8s;
    background-image: url(Here's a link);
    background-size: cover;
    background-position: center;
}

slide p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 560px;
    color: black;
}

@keyframes slide {
    0% { left: 100%; width: 100%;}
    5% { left: 0%;}
    25% {left: 0%;}
    30% {left: -100%; width: 100%;}
    30.0001% {left: -100%; width: 0%;}
    100% { left: 100%; width: 0%;}
}

 <section id="PageC">
             <h1>Photos</h1>  
                <slider>
                    <slide><p>A 2015</p></slide>
                    <slide><p>V 2017</p></slide>
                    <slide><p>A 2018</p></slide>
                    <slide><p>F 2018</p></slide>
                </slider>
             <article>Slideshow lorem ipsum.</article>        
        </section>

谢谢！

Answer 1

请参阅下文。更改记录在CSS代码中。希望对您有所帮助。

Slider {
  display: block;
  width: 90%;
  height: 200px; /* Adjusted */
  background-color: #0AF8B3;
  overflow: hidden;
  /* position: absolute; REMOVED */
  position: relative; /* Added */
  border: 2px solid red;
  margin: 0 auto; /* Added */
}

Slider>* {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #FF8000;
  animation: slide 12s infinite;
  overflow: hidden;
}

Slide:nth-child(1) {
  left: 0%;
  animation-delay: -1s;
  background-image: url(https://via.placeholder.com/200x100/ff0000);
  background-size: cover;
  background-position: center;
}

Slide:nth-child(2) {
  animation-delay: 2s;
  background-image: url(https://via.placeholder.com/200x100/00ff00);
  background-size: cover;
  background-position: center;
}

Slide:nth-child(3) {
  animation-delay: 5s;
  background-image: url(https://via.placeholder.com/200x100/0000ff);
  background-size: cover;
  background-position: center;
}

Slide:nth-child(4) {
  left: 0%;
  animation-delay: 8s;
  background-image: url(https://via.placeholder.com/200x100/00ffff);
  background-size: cover;
  background-position: center;
}

slide p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin-top: 560px;
  color: black;
}

@keyframes slide {
  0% {
    left: 100%;
    width: 100%;
  }
  5% {
    left: 0%;
  }
  25% {
    left: 0%;
  }
  30% {
    left: -100%;
    width: 100%;
  }
  30.0001% {
    left: -100%;
    width: 0%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}

<section id="PageC">
  <h1>Photos</h1>
  <slider>
    <slide>
      <p>A 2015</p>
    </slide>
    <slide>
      <p>V 2017</p>
    </slide>
    <slide>
      <p>A 2018</p>
    </slide>
    <slide>
      <p>F 2018</p>
    </slide>
  </slider>
  <article>Slideshow lorem ipsum.</article>
</section>

Answer 2

尝试边距：自动；

Slider{
  display: block;
  width:90%;
  height:92%;
  background-color: #0AF8B3;
  overflow: hidden;
  margin: auto;
  border: 2px solid red;
}