Центрирование слайд-шоу с HTML и CSS

Question

Я пытаюсь разработать веб-сайт, чтобы лучше понять мои веб-разработки, и столкнулся с проблемой реализации веб-сайта. Я изо всех сил пытаюсь понять, как аккуратно центрировать мое слайд-шоу, которое я реализовал для домашнего экрана, чтобы я мог разработать заголовок, нижний колонтитул и панель навигации вокруг него. Любая помощь в этом направлении будет принята с благодарностью. используемый код HTML выглядит следующим образом.

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

Вы можете выровнять ползунок по центру разными способами. Как и использование тега center, хотя это не рекомендуется.

Устаревшее
Эта функция устарела. Хотя он все еще может работать в некоторых браузерах, его использование не рекомендуется, поскольку его можно удалить в любое время. Старайтесь избегать его использования.

См. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

---

Вы можете изменить свой css код на это:

slider {
    display: block;
    margin-left: auto;
    margin-right: auto;
    // margin: 0 auto;
}

---

Или вы можете заключить slider в div и добавить text-align: center в div (он же упаковщик или контейнер) и добавить display: inline-block к slider

---

Если вы хотите сохранить ваш position: absolute, тогда вы можете написать свой css следующим образом.

slider {
    position: absolute;
    left: 50%;
    margin-left: 640px; //half of the width
    // you can also use: 
    // transform: translate(-50%, 0px);
    // instead of margin-left
}

Также см. эти два для более подробных объяснений:

https://www.w3schools.com/css/css_align.asp https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/

Answer 2

Насколько я понимаю, вы хотите центрировать slider в теле. Если это так, вам нужно изменить absolute на relative из position из slider.

slider {
    display: block;
    width: 1280px;
    height: 50%;
    background-color: #1f1f1f;
    overflow: hidden;
    position: relative;
    margin: 0px auto;
}