Html 垂直对齐中间形式，就像文本一样

我想垂直对齐我的表单，就像我在我的网站上垂直对齐我的文本一样。但它不起作用，我该怎么办

我希望它是这样的：

这是我的密码

2列CSS布局
身体{
利润率：20px；
字体系列：“Lucida Grande”，“Lucida Sans Unicode”，“Lucida Sans”，日内瓦，Verdana，无衬线；
背景色：#555
}
div{
文本对齐：居中
}
#页面{
背景色：#fff；
保证金：0自动；
文本对齐：左对齐；
宽度：755px；
填充：0 10px
}
#标题{
边框底部：0px实心#000；
高度：30px；
线高：30px
}
/*开始导航栏样式设置*/
#导航{
文本对齐：居中；
线高：30px；
}
#导航ul{
文本对齐：居中；
字体大小：11px；
宽度：100%；
保证金：0；
填充：0；
显示：内联块；
列表样式：无；
背景色：#F2F2；
边框底部：1px实心#ccc；
边框顶部：1px实心#ccc
}
#李海军{
保证金：自动；
显示：内联块
}
#李娜{
显示：块；
填充：8px 15px；
文字装饰：无；
字号：700；
颜色：#069；
右边框：1px实心#ccc
}
#导航李a：悬停{
颜色：#c00；
背景色：#fff
}
/*结束导航栏样式*/
#内容{
高度：200px；
宽度：100%；
显示：表格；
背景：无重复滚动0 0无；
}
#内容p{
显示：表格单元格；
垂直对齐：中间对齐；
}
#页脚{
高度：30px；
线高：30px；
边框顶部：1px实心#000；
字号：9pt
}
#页脚p{
浮动：对；
}
.清楚{
明确：两者皆有；
}
请登录

用户名


密码



版权所有2014

您可以这样做：

将您的

放入

中，并给它一个id

#myForm

：

<div id="myForm">
  <p>
    <form action="" method="post">
      <label for="un">Username</label>
      <input type="text" id="un" placeholder="username" />
      <br/>
      <label for="pw">Password</label>
      <input type="password" id="pw" placeholder="password" />
      <br/>
      <input type="submit" value="Login" />
    </form>
  </p>
</div>

---

在小提琴[编辑] < P>使用这个CSS垂直对齐<代码>表单<代码>中的<代码>内容< /代码> -/p>

#content form {
    display: table-cell;
    vertical-align: middle;
}

像这样更改CSS（我为可视化添加了500像素的高度）

---

通过使用flex display，我们可以在保持响应性的同时以任何可能的方式对齐元素，因此这将适用于固定和响应的方法，这并不重要

请在此处发布您的代码示例。我不确定如何在不手动缩进150行代码4个空格的情况下进行此操作？请尝试在小提琴中设置您的代码（）所以我们可以帮助你我一直认为pastebin就足够了，谢谢你的提示@BrianCherdak，在粘贴代码后高亮显示代码，然后按CTRL+K将其缩进。我要求你发布它是因为1）该网站的目标是在第三方网站可能被关闭后仍保留内容，2）我们中的一些人白天都在使用代理，这会阻止像pastebin这样的网站。

#myForm {
    position: absolute;
    top: 16%;
    left: 42%;
}

#content form {
    display: table-cell;
    vertical-align: middle;
}

body {
    margin:20px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    background-color:#555;
    height:100%;
}
div {
    text-align:center
}
#page {
    background-color:#fff;
    margin:0 auto;
    text-align:left;
    width:755px;
    padding:0 10px;
}
#header {
    border-bottom:0px solid #000;
    height:30px;
    line-height:30px
}
/* Begin Navigation Bar Styling */
#nav {
    text-align:center;
    line-height: 30px;
}
#nav ul {
    text-align:center;
    font-size:11px;
    width:100%;
    margin:0;
    padding:0;
    display:inline-block;
    list-style:none;
    background-color:#f2f2f2;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc
}
#nav li {
    margin:auto;
    display:inline-block
}
#nav li a {
    display:block;
    padding:8px 15px;
    text-decoration:none;
    font-weight:700;
    color:#069;
    border-right:1px solid #ccc
}
#nav li a:hover {
    color:#c00;
    background-color:#fff
}
/* End navigation bar styling. */
#content {
    height: 500px;
    width:100%;
    background:none repeat scroll 0 0 none;
    display:flex;
    align-items:center;
}
#content p {
    display: table-cell;
    vertical-align: middle;
}
#footer {
    height:30px;
    line-height:30px;
    border-top: 1px solid #000;
    font-size:9pt
}
#content:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
    /* Adjusts for spacing */
}
#footer p {
    float: right;
}
.clear {
    clear: both;
}
form {
    margin:0 auto;
    width: 300px;
    padding: 10px 15px;
    border: #a0a0a0 solid 1px;
    background: #f5f5f5;
}