How do I move this slideshow to the center (horizontally) of the page?

Question

I've already tried multiple answers on previous questions, but I can't seem to find out how to move my slideshow to the center of the page (horizontally). If I try to do so with text-align: center; it doesn't work. I am not that good in HTML and CSS, so any help is appreciated. The size of the slideshow is good, but the position needs to be center, instead of in the top left of my page. Padding also didn't seem to work.

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>

Thank you!

Answer 1

Please see below. Changes are documented in the CSS code. Hope it helps.

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>