如何将此幻灯片移动到页面的中心(水平)

Question

我已经尝试了之前问题的多个答案，但似乎找不到如何将幻灯片移动到页面中心(水平(。如果我尝试使用文本对齐：居中；它不起作用。我在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

尝试使用margin:auto；

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