使用上聯想語法

把內容置中心

body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh; //要加 align-items 才有效
}

viewpoint 變換背景色

2023.3.10
為什麼 不是以html 元素 長寬100% 背景色出不來?
而一定要改body.style.background ?
注意通常固定背景色都寫在body

<div class="carousel">
  <div class="slide slide1 color1 active">
    <h1>HELLO</h1>
  </div>
</div>

//有背景色
body {
  height: 100vh; 
  -webkit-font-smoothing: antialiased;
}
.carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #060047;
}
.silde1 {
    width: 100%;
  height: 100%;
}

//沒背景色 ??
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /*align-items: center; 才會顯示*/
  -webkit-font-smoothing: antialiased;
}

.silde1 {
    width: 100%;
  height: 100%;
}