화면 중앙 로그인 창

첫번째 예제

css

/* 화면가운데 위치하는 로그인 상자 */
#wrapping { 
  width:500px; 
  height:200px; 
  position: absolute; 
  background-color:gray; 
  vertical-align:middle; 
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -100px;
}
#wrapping div { 
  width: 370px; 
  position: absolute; 
  left: 70px; 
  background-color:yellow;
}
 

/* 로그인 상자 안의 로그인 폼 부분 */

#wrapping > div dl { float: left; width: 280px;}
#wrapping > div dt { float: left; width: 70px; padding: 2px 0 3px 0; }
#wrapping > div dd { float: left; width: 140px; padding: 2px 0 3px 0;}
#wrapping > div input { height: 18px; width: 145px; border: 1px solid red; }

/* 로그인 폼 안의 로그인 버튼 */
#wrapping > div > p {
  float: left; 
  width: 80px; 
  height: 50px; 
  background-color: blue; 
}

/* 로그인 상자안의 이이디비밀번호 찾기 버튼 */
#wrapping #idpw { 
  top: 110px; 
  position: relative; 
  left: 260px; 
}

html

<div id="wrapping">
  <div>
    <dl>
      <dt>아이디</dt>
      <dd><input name="id" type="text" /></dd>
      <dt>패스워드</dt>
      <dd><input name="id" type="password" /></dd>
    </dl>
    <p>로그인</p>

  </div>
  <p id="idpw">아이디/패스워드 찾기</p>
</div>

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

두번째 예제

See the Pen 화면 정중앙의 로그인창 by younghyeong ryu (@wangta69) on CodePen.