box - 중앙에 배치하기

Container 내부의 Content

<div class="body">
   <div class="container">
    <div class="content">
      CONTENT1
    </div>
  </div>
</div>

.container{
  width: 400px;
  height: 400px;
  background-color: orange;
}
.content{
  width: 200px;
  height: 200px;
  background-color: skyblue;
}

---

중앙정렬

1. content 수평 중앙 정렬

.content.ex1{
  margin:auto;
}

2. content 수직 중앙 정렬 ( 부모 요소 위아래 에 내부여백 추가하는 방법 )

.container.ex2{
  padding-top:50px;
  padding-bottom:50px;
  box-sizing:border-box;
}

3. content 수직 + 수평 중앙 정렬 ( position + transform 속성 이용하는 방법)

.container.ex3{  
  position:relative;
}
.content.ex3{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

4. content 수직 + 수평정렬 ( flex )

.container.ex4{
  display:flex;
  align-items: center;
  justify-content: center;
}

5. content 수직 + 수평정렬 (position 과 top left right bottom 그리고 margin auto)

.container.ex5{  
  position:relative;
}
.content.ex5{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin: auto;
}

6. content 수직 + 수평정렬 ( grid )

.container.ex6{
  display:grid;
  place-items:center;
}