CSS - 가운데 정렬 하는 방법

1.  flex 이용하여 가운데 정렬

• display: flex 설정
• justify-content: center 설정
• 내부 엘리먼트 크기가 바깥 엘리먼트 크기보다 작아야합니다.

.box3 {
  display: flex;
  justify-content: center;
  border: 1px solid black;
}

.box3 span {
   text-align: center;
   width: 50%;
}

예시

Center

2. div  엘리먼트 가운데 정렬하기

• margin: auto 사용하기

<div class="box">
  <span>Hello</span>  
</div>

<style>
.box{
  margin:auto;
  width : 50%;
  border : 1px solid black;
}
</style>

예시

Hello

3. 글자 가운데 정렬하기

• text-align: center 사용

<div class="box">
  Hello
</div>

<style>
.box{
  margin:auto;
  width : 50%;
  border : 1px solid black;
  text-align:center;
}
</style>

예시

Hello