TOC
- position 속성을 먹인 element를 center에 놓는 것
- 깔끔한 해결책
1. position 속성을 먹인 element를 center에 놓는 것
css를 사용해 position 속성을 켜고 어떤 element를 center에 위치시키고 싶은 일은 아마 많을 것이다.
이 경우에 중심을 어떻게 잡으면 되겠는가? 정확히는 element의 중심과 window의 width값의 중심이 일치하는 결과가 필요한 것이다.
position으로 element를 띄워주고 나면 center 잡기는 까다로워진다. 기존의 text-align이나 align-items는 position 속성을 줌으로써 정상작동하지 않게 되기 때문이다.
그렇게 left, top 값을 이리 저리 굴리다 적절해 보이는 추정값을 그냥 때려넣거나(element의 크기 값을 px로 구해 값을 계산하거나)
혹은 js의 손을 빌어 element의 크기를 받아내고 js+css형태로 문제를 풀어내는 방법도 있다.
그러나 이런 방법은 아름답지 못하다. (번거롭고 손이 많이간다)
2. 깔끔한 해결책
CSS만으로 이 문제를 끝내보자.
stackoverflow에 너무 좋은 예시가 있어 이 글을 차용한다.
어떤 element가 있고 이를 position 설정을 주었다.
#content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100px; /* Need a specific value to work */
}<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>https://stackoverflow.com/a/8273750
이런식으로 margin값을 이용해 브라우저가 center 값을 브라우저가 알아서 계산하도록 유도해보자.
여기서 그냥 그렇구나~하고 넘어가지말고 그 값을 브라우저가 계산하도록 한다 = auto를 적합하게 사용해보면 어떨까? 라는 생각을 가지는 것이 포인트이다.
conclusion
auto를 적재적소에 사용하면 생각보다 큰 효용이 있다.
auto를 그냥 안쓰거나 기계적으로 사용하지 말고 생각해보자
