title: How to align the div to the center vertically in jsp
body: <p>I'm developing a website for the first time. I have used two div tags. One is outer container whose width and height are set to 100%. Other one is inside container. I want to set this to the center vertically. similar to this website: <a href="http://www.bigcinemas.com/IN/home.aspx" rel="nofollow">http://www.bigcinemas.com/IN/home.aspx</a>.
  But its not working. I tired something like this:          </p>
  
  <p>index.jsp</p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;div class="banner"&gt;
                  &lt;a class="logo" href="index.jsp"&gt;
                      &lt;img src="images/logo.png" alt="Rainbow Entertainment" width="250px" height="50px"/&gt;&lt;/a&gt;
                  &lt;div id="login"&gt;
                      &lt;table style="background-color: purple"&gt;
                          &lt;tr&gt;&lt;td&gt;Username : &lt;input type="text"&gt;&lt;/td&gt;
                              &lt;td&gt;Password : &lt;input type="password"&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;a href="login.jsp"&gt;Sign in&lt;/a&gt;&lt;input type="submit"&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
           &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>menu.css</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Also I want to the difference between  id and  class.</p>