Centering in CSS

CSS로 아주 심플한 이력서를 하나 만드는데도 걸림돌이 아주 많았다. 하나가 꼬이기 시작하면 나머지도 꼬여버리고, 될 줄 알았던 property가 먹히지 않고..그 중 하나의 이유는 elements들을 centering 하는 방법이 제각기 다르고 또 너무 많은 방법이 있기 때문이었다.

일단 내가 뭘 모르는지 알았다는거에 감사하면서, element마다 어떻게 centering을 해야 할 지 정리해보려 한다.

Horizontally

1. inline or inline-elements일 때 (ex: text, links, span, a, button, img...)

이하와 같은 방식으로 centering을 해줄 수 있다.

.center {
  text-align: center;
  }

inline, inline-block, inline-table, inline-flex에 등등에 적용가능하다

2. block level element일 때 (ex: p, div, article, aside, header, footer, li, main, nav)

margin-left와 margin-right을 auto로 설정하면 된다.(width가 이미 적용되어있다는 가정하에)

.center-me {
margin: 0 auto;
}

왜 중앙정렬을 이렇게 하는지는 역사와 전통이 너무 꼬였기 때문에 설명이 어려움. 그냥 외우자