[html, css] Div 중앙정렬

브라우져의 중앙에 로그인 Form을 위치 시키는데 가장 많이 사용될것 같은데요. 간단하지만 의외로 로그인 폼 이외에는 잘 사용을 안하는지라 (개인적 생각) 자주 까먹고 구글링해서 항상 찾는 소스이기도 합니다.

 

1. css 

body {
	margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
 	background:#323333; -webkit-text-size-adjust: none; 
 	background-image:url(../images/loginbg.jpg);
 	background-repeat: repeat-x;
}

div.centerOuter {
  position: absolute;
  top: 50%; left: 50%;
  margin: -210px 0 0 -290px;
  width: 540px; height: 380px;
  border: 10px solid forestgreen;
  padding: 10px;
  background-color: lightgreen;
}

div.centerInner {
  position: absolute;
  top: 50%; left: 50%;
  margin: -90px 0 0 -130px;
  width: 240px; height: 160px;
  border: 10px solid orange;
  background-color: yellow;
  font: 2em "Palatino Linotype", "Book Antiqua", Palatino, serif;
  color: darkbrown;
  text-align: center;
}

 

2. html 

<div class="centerOuter">
  <div class="centerInner">Center</div>
</div>

 

3. 결과