Centering a slideshow with HTML and CSS - html

Question

I am attempting to develop a website to better my web development understanding and have run into an issue implementing a website. I am struggling figuring out how to neatly center my slideshow I have implemented for the home screen so i can develop my header, footer and nav bar around it. Any help on this end would be greatly appreciated. the HTML code used looks like this.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0px;
}
slider {
display: block;
width: 1280px;
height: 50%;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
margin: 0px auto;
}
slider>* {
position: absolute;
display: block;
width: 50%;
height: 50%;
background: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
margin: 0px auto;
}
slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(1.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(2) {
animation-delay: 2s;
background-image: url(2.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(3) {
animation-delay: 5s;
background-image: url(3.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(4) {
left: 0%;
animation-delay: 8s;
background-image: url(4.jpg);
background-size: cover;
background-position: center;
}
slide p {
font-family: Comfortaa;
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff;
}
#keyframes slide {
0% {
left: 100%;
width: 100%;
}
5% {
left: 0%;
}
25% {
left: 0%;
}
30% {
left: 0%;
}
30.0001% {
left: -100%;
width: 0%;
}
100% {
left: 100%;
width: 0%;
}
}
<slider>
<slide>
<p>Slide 1</p>
</slide>
<slide>
<p>Slide 2</p>
</slide>
<slide>
<p>Slide 3</p>
</slide>
<slide>
<p>Slide 4</p>
</slide>
</slider>

Answer 1

As far as I understand, you want to center the slider in the body. If so, you need to change absolute by relative of position of slider.
slider {
display: block;
width: 1280px;
height: 50%;
background-color: #1f1f1f;
overflow: hidden;
position: relative;
margin: 0px auto;
}

Answer 2

You can center-align the slider by many ways. Like using the center tag although it is not recommended.
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
You can change your css code to this:
slider {
display: block;
margin-left: auto;
margin-right: auto;
// margin: 0 auto;
}
Or you can enclose slider in a div and add text-align: center to the div (aka wrapper or container) and add display: inline-block to slider
If you want to keep your position: absolute, then you can write your css like this.
slider {
position: absolute;
left: 50%;
margin-left: 640px; //half of the width
// you can also use:
// transform: translate(-50%, 0px);
// instead of margin-left
}
Also see these two for more ways and explanation:
https://www.w3schools.com/css/css_align.asp
https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/