div에서 중심으로 div를 정렬하는 방법

Question

처음으로 웹 사이트를 개발 중입니다. 두 div 태그를 사용했습니다. 하나는 너비와 높이가 100 %로 설정된 외부 컨테이너입니다. 다른 하나는 컨테이너 안에 있습니다. 이것을 센터로 수직으로 설정하고 싶습니다. 이 웹 사이트와 유사합니다 : http://www.bigcinemas.com/IN/home.aspx. 하지만 작동하지 않습니다. 이런 내가 피곤 뭔가 :

index.jsp를

<div class="container"> 
      <div class="banner"> 
       <a class="logo" href="index.jsp"> 
        <img src="images/logo.png" alt="Rainbow Entertainment" width="250px" height="50px"/></a> 
       <div id="login"> 
        <table style="background-color: purple"> 
         <tr><td>Username : <input type="text"></td> 
          <td>Password : <input type="password"></td> 
          <td><a href="login.jsp">Sign in</a><input type="submit"></td></tr> 
        </table> 
       </div> 
      </div> 
      </div> 
     </body> 
     </html> 

menu.css

.container{ 
    width: 100%; 
    height: 100%; 
} 

#banner{ 
    width: 60%; 
    padding-left: 30%; 
    padding-right: 30%; 
    position: absolute; 
} 
.logo{ 
    margin-top: 5px; 
    float: left; 
    width: 20%; 
    position: relative; 
} 

#login{ 
    width: 30%; 
    float: right; 
    padding-left: 10%; 

} 
#menu{ 
    height: 20%; 
    width: 70%; 
} 
.menu_items{ 
    width: 80%; 
    color: white; 
} 

또한 나는 id와 class의 차이로합니다.

Answer 1

나는 오늘 비슷한 해결책을 찾고있었습니다.이 질문에 대한 답을 확인하십시오. How to vertically center a div for all browsers?. 귀하의 필요에 맞는 코드가 제공되는 것 같습니다.

<div class="outer"> 
<div class="middle"> 
<div class="inner"> 

<h1>The Content</h1> 

<p>Once upon a midnight dreary...</p> 

</div> 
</div> 
</div> 

CSS

.outer { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 

.inner { 
    margin-left: auto; 
    margin-right: auto; 
    width: /*whatever width you want*/; 
}