<div style="color: #eeffff; background-color: #212121; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #89ddff;">.</span><span style="color: #ffcb6b;">wrap</span>&nbsp;<span style="color: #89ddff;">.</span><span style="color: #ffcb6b;">list01</span>&nbsp;<span style="color: #89ddff;">{</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">width</span><span style="color: #89ddff;">:</span>&nbsp;<span style="color: #f78c6c;">200px</span><span style="color: #89ddff;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">height</span><span style="color: #89ddff;">:</span>&nbsp;<span style="color: #f78c6c;">200px</span><span style="color: #89ddff;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">background</span><span style="color: #89ddff;">:</span>&nbsp;hotpink<span style="color: #89ddff;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">position</span><span style="color: #89ddff;">:</span>&nbsp;relative<span style="color: #89ddff;">;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">left</span><span style="color: #89ddff;">:</span>&nbsp;<span style="color: #f78c6c;">50%</span><span style="color: #89ddff;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">top</span><span style="color: #89ddff;">:</span>&nbsp;<span style="color: #f78c6c;">50%</span><span style="color: #89ddff;">;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">transform</span><span style="color: #89ddff;">:</span>&nbsp;<span style="color: #82aaff;">translate</span><span style="color: #89ddff;">(</span><span style="color: #f78c6c;">-50%</span><span style="color: #89ddff;">,</span>&nbsp;<span style="color: #f78c6c;">-50%</span><span style="color: #89ddff;">);</span>&nbsp;&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #89ddff;">}</span></div>
<div></div>
<div><span style="color: #89ddff;">다른거 다그대로하고, position만 relative로 했더니</span></div>
<div><span style="color: #89ddff;"> 똑같이 적용이 됩니다! relative는 기준이 자기 자신인줄</span></div>
<div><span style="color: #89ddff;">알았는데, 왜 똑같이 될까요 ???</span></div>
</div>

<p>안녕하세요 응주님,</p>
<p></p>
<p>relative는 자기 자신이 기준이 맞습니다.&nbsp;&nbsp;</p>
<p>지금 예제의 위치가 absolute left:0; top:0;을 했을때의 위치와 똑같기 때문에,</p>
<p>포지션을 바꾸셔도 위치는 똑같아 보이는 현상이고</p>
<p></p>
<p>실제로 코딩을 하실때는 위치가 달리지실 수 있습니다 ~ㅎㅎ</p>
<p></p>
<p>그래서 가운데 정렬은 absolute를 사용해주셔야 합니다!&nbsp; :)</p>

인프런 커뮤니티 질문&답변

position: relative