text-align: center 작동하지 않을 때 해결법

글자나 하위 태그를 가운데 정렬하려고 할때

text-align: center

를 사용하여 해결하려 할 때 잘 작동하지 않을 때가 있다.

이떄는 보통 display: flex 를 같이 사용하지 않았거나

글자나 하위태그를 감싸는 상위 태그에 적용시킨것이 아닌 직접적인 글자나 하위 태그에 해당 CSS 를 적용시켰을 가능성이 높다.

따라서 아래와 같이 가운데 정렬 하고 싶은 태그의 상위 태그에 display 와 text-align을 적용하면 해결된다.

<div class="container">
	<div>글자</div>
</div>

<style>
.container {
  display: flex;
  align-items: center;
  height: 100px;
}
</style>