DIV 화면 정중앙에 박스 배치하기

DIV로 만든 박스를 화면 정중앙에 배치하는 방법은 생각보다 간단하지가 않습니다.

특히 박스의 가로 크기가 변하는 경우는 더욱더 어렵습니다.

예를 들면 Popup위젯의 경우가 해당됩니다.

- 일반적인 코드 -

<style>
#content { position:absolute;
  height:200px; 
  width:400px;
  margin:-100px 0px 0px -200px;
  top: 50%; 
  left: 50%;
  text-align: left;
  background-color: #f5f5f5;
  border: 1px dotted #000000;
  overflow: auto;
  padding:15px;
}
</style>

- Popup위젯의 경우는 아래의 코드로 팝업창을 화면중앙에 배치할 수 있습니다.

#pop-ups { position:{$widget_info->popup_location}; margin-left:-{$widget_info->popup_width/2}px; top:{$widget_info->board_top}%; left:{$widget_info->board_left}%; z-index:99 }