Question

我创建了一个简单的网页（请忽略php）。我想让身体的所有内容都居中 - 它是水平对齐的（通过文本对齐：中心），但是我不能让它在顶部和底部垂直对齐。

链接到JS小提琴：http://jsfiddle.net/6q1a1b01/1/

我试过了：

margin: 0 auto 0 auto;
vertical-align: middle;

尽管有这两次尝试，但我还是很欣赏有关为什么内容没有垂直居中的原因。

HTML：

<body>
<h1>Welcome to my website!</h1>
<h2>Please login below.</h2>
<h3>Don't have an account? Create one here.</h3>

<div class="formFormat" >  
<div  id="table1">
<form name="loginForm" method="post" action="<?php? $_SERVER['PHP_SELF'];>" >
  <table id="cssTable">
    <tr>
        <td>Username:</td><td><input type="text" id="user" name="user" value="<?php echo $user_name?>" /></td>
    </tr>
    <tr>
        <td>Password:</td><td><input type="text" id="pass" name="pass" value="<?php echo $user_password?>"/></td>
    </tr>
      </table>
  </form>
  </div>

  <div id="table2">
  <form>
  <table> 
  <tr>
     <td><input type="submit" name="submitLogin"/></td>
   </tr>
   <tr>
      <td id="createAccount">Create an account.</td>
   </tr>

  </table>
</form>
  </form>
  </div>
</div> 

</body>
</html>

CSS：

body {
  width: 100%;
  height: 100%;
  text-align:center;
  font-family: helvetica;
  font-color: white;
   background-image: url(https://download.unsplash.com/photo-1429091967365-492aaa5accfe);
    margin: 0 auto;
}


.formFormat{    
  padding: 10px;
  height: auto;
  width:auto;
  border: 1px black solid;
  display:inline-block;
  position: relative;

}

#table1 {
  padding-bottom: 0px;
}

#table2 {
  display:inline-block;

}

#createAccount {
  font-style: italic;
}

td {
  padding: 5px;
  font-size: 18px;
}

input[type="text"] {
    border : 1px solid ;
}

input[type="submit"] {
    border : 1px solid ;
}

Answer 1

试试这个http://jsfiddle.net/6q1a1b01/3/。

在<body>

下面加上此代码

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

在</body>

之上加上此代码

</div>
</div>

在CSS中包含此代码：

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

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

Answer 2

使用vertical-align: middle;属性无法垂直对齐到屏幕中间。

你可以采取以下几种方式：

使用FlexBox布局
使用CSS表
修正了高度和位置技巧，请参阅此处 - http://jsfiddle.net/mho8ytv7/

基于JSFiddle代码的HTML建议很少：

您不能嵌套FORM元素。
User One标题为这个更简单的页面而其他人使用css来设置样式。

来源：https://css-tricks.com/centering-css-complete-guide/

Answer 3

看看这个，看看是否可以帮到你： vertical align anything with just 3 lines of css

身体内容不会垂直居中

3 个答案: