CSS로 DIV 중앙 정렬 시키기

설명

1. div의 width, height 를 정해 줍니다.
2. position : absolute
3. left, top 을 각각 50% 를 해줍니다.
4. vertical-align : middle 처리
5. margin-left 와 margin-top 의 크기를 1번에서 정해준 width, height 의 반반을 다시 해 줍니다. 5번처럼 해주는 이유는 50%라는 값을 사용할 경우 div 의 left top을 기준으로 함으로서 다시금 테이블을 마이너스 마진을 줌으로서 보상합니다.

css

#wrapper{
  position: absolute; 
  width:100px; 
  height:100px; 
  left: 50%; 
  top:50%;
  margin-left: -50px; /* width / 2 */
  margin-top: -50px;  /* height / 2 */
  background-color: red;
/*   vertical-align:middle;  */
  
}

html

<div id="wrapper"></div>

See the Pen div 화면 중앙에 위치 시키기 by younghyeong ryu (@wangta69) on CodePen.