[CSS] 가운데 정렬 하는법

css란?

 

 

cascading style sheets 약자로 html 등의 문서의 스타일을 꾸밀때 사용하는 스타일 시트 언어

 

<p style="font-size : 20px; color : red"> 글자 </p>

 

 

 

 

 

텍스트 등 인라인 요소 중앙 정렬

 

 

text-align: center 이용

p {
  text-align: center;
}

 

 

 

 

 

블록 요소 중앙 정렬

 

 

1) margin: 0 auto 이용

 

div {
  margin: 0 auto;
}

 

• auto는 자동적으로 사이즈를 적용하는 것이기 때문에 가로의 넓이가 있어야한다(지정되있지 않다면)
• 인라인 속성이 아닐때는 display: block

 

 

 

2) flexbox 이용

 

 

부모요소에 다음과 같이 flex 설정을 해준다

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