CSS를 이용해 객체 가운데 위치하기!

CSS를 이용해 객체 가운데 위치하기!

객체를 가운데에 두는 방법에는 여러 개가 있다. 

calc를 기억해두려는 목적으로 글을 쓰기 시작했는데, 내가 작업하면서 써봤던 방법을 작성해두려고 한다. (flex-box는 논외)

조건은 부모 객체의 가운데에 위치시키기다.

HTML

<div class="wrapper">

  <div class="popup">   

  </div>

</div>

CSS

.wrapper{

  position:relative;

  width:400px;

  height:400px;

  background-color:#cacaca;

}

.popup{

  position:absolute;

  top:50%;

  left:50%;

  margin-top:-75px;

  margin-left:-75px;

  width:150px;

  height:150px;

  background-color:pink;

}

이런 식으로 영역의 50%를 top, left 내리고 그 객체 사이즈의 반 값을 빼주는 형식으로 작업했다.

(객체 시작 위치를 기준으로 50% 이동하기 때문에 객체의 값을 빼줘야 가운데 위치한다.)

위와 비슷하게 calc를 쓸 수 있다.

CSS

.wrapper{

  position:relative;

  width:400px;

  height:400px;

  background-color:#cacaca;

}

.popup{

  position:absolute;

  top: calc(50% - 75px);

  left: calc(50% - 75px);

  width:150px;

  height:150px;

  background-color:pink;

}

top: calc(50% - 75px);

left calc(50% - 75px);

(75px은 객체의 반 값)

[예제]

See the Pen study-alignment css3 by leeyoonseo (@okayoon) on CodePen.

MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/calc

can i use : https://caniuse.com/#search=calc

IE9~ 지원하는데, 부분 지원이라고 나온다.

물론 값이 변수일 경우에는 js로 비슷하게 작업했다.

HTML

<div class="wrapper">

  <div class="popup">   

  </div>

</div>

CSS

.wrapper{

  position:relative;

  width:400px;

  height:400px;

  background-color:#cacaca;

}

.popup{

  position:absolute;

  top:50%;

  left:50%;

  width:150px;

  height:150px;

  background-color:pink;

}

JS

const popup = document.getElementsByClassName('popup')[0];

const _width = popup.offsetWidth;

const _height = popup.offsetHeight;

popup.style.marginTop = -(_width/2)+'px';

popup.style.marginLeft = -(_height/2)+'px';

가운데에 위치하기 위한 margin 값 들을 변수로 받아서 계산한 후에 적용시켜준다.

이렇게 하면 width, height 값이 변하더라도 깨지지 않는다.

[예제]

See the Pen study-alignment js by leeyoonseo (@okayoon) on CodePen.