如何在jsp中将div垂直对齐到中心答案

【问题标题】：How to align the div to the center vertically in jsp如何在jsp中将div垂直对齐到中心
【发布时间】：2014-07-08 05:01:31
【问题描述】：

我是第一次开发网站。我使用了两个 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 的区别。

【问题讨论】：

标签： java html css jsp

【解决方案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*/;
}

【讨论】：