【问题标题】：Vertically centring the element on the page [duplicate]在页面上垂直居中元素[重复]
【发布时间】：2016-11-12 09:50:09
【问题描述】：

我无法垂直对齐我的表单，实际上尝试了所有方法。边距、垂直对齐、高度、位置 - 尝试应用所有内容，但似乎没有任何效果。

这是我正在使用的 html 和 css。

html{
    position: relative;
    background-color: #e1e8f0;
    font-size:62.5%;
    margin: 0px;
    padding: 0px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    height: 500px;
}
.navbar{
    border: none;
}
body{
    background-color: #e1e8f0;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    position: relative;
    height: 500px;
    width: device-width;
}
.signup{
    position: relative;
    height: 100%;
    width: 50%;
    margin: auto auto;
    margin-left: 50%;
    font-size: 1.6em;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border: 1px solid black;
}
.signup input{
    margin:20px;
    text-decoration: none;
    border: 1px solid #e4e6e8;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border-radius: 5px;
    padding: 2px;
}
.message{
    width: 50%;
    float: left;
    overflow: hidden;
}
.message pre{
    overflow: hidden;
}
.center{
    position: relative;
    width: 80%;
    height: 70%;
    margin: auto auto;
    border: 1px solid black;
}
table{
    height: 100%;
    margin: auto auto;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">

</head>
<body>

<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
    </div>
    <div class="collapse navbar-collapse" id="#myNavbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" style="color:#fff;" >WHO</a></li>
            <li><a href="#" style="color:#fff;" >Sign up</a></li>
            <li><a href="#" style="color:#fff;" >Login</a></li>
        </ul>
    </div>
  </div>
</nav>





<div class="signup">
<div class="center">
    <form action="#" method="get">
        <table border="black">
            <tr>
                    <td><label for="emailId">Email id</label>
                    <td><input type="email" placeholder="you@example.com" id="emailId"></input><br>
            </tr>
            <tr>
                <td><label for="password">Password</label>
                <td><input type="password" placeholder="********" id="password"></input><br>
            </tr>
            <tr>
                <td><label for="name">Name</label>
                <td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
            </tr>
            <tr>
                <td></td>
                <td><button type="submit" class="btn btn-primary">Sign Up</button></td>
            </tr>
        </table>
    </form>
</div>

【问题讨论】：

stackoverflow 上有大约 1000000 个问题
howtocenterincss.com

标签： html css

【解决方案1】：

试试下面：

Vertical-align 将与 display:table; 一起使用

html{
    position: relative;
    background-color: #e1e8f0;
    font-size:62.5%;
    margin: 0px;
    padding: 0px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    height: 500px;
}
.navbar{
    border: none;
}
body{
    background-color: #e1e8f0;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    position: relative;
    height: 500px;
    width: device-width;
}
.signup{
    position: relative;
    height: 100%;
    width: 100%;
  display:table;
    margin: auto auto;
   
    font-size: 1.6em;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border: 1px solid black;
}
.signup input{
    margin:20px;
    text-decoration: none;
    border: 1px solid #e4e6e8;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border-radius: 5px;
    padding: 2px;
}
.message{
    width: 50%;
    float: left;
    overflow: hidden;
}
.message pre{
    overflow: hidden;
}

table{
    height: 100%;
    margin: auto auto;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">

</head>
<body>

<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
    </div>
    <div class="collapse navbar-collapse" id="#myNavbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" style="color:#fff;" >WHO</a></li>
            <li><a href="#" style="color:#fff;" >Sign up</a></li>
            <li><a href="#" style="color:#fff;" >Login</a></li>
        </ul>
    </div>
  </div>
</nav>





<div class="signup">
    <form action="#" class="center-block" method="get">
        <table border="black">
            <tr>
                    <td><label for="emailId">Email id</label>
                    <td><input type="email" placeholder="you@example.com" id="emailId"></input><br>
            </tr>
            <tr>
                <td><label for="password">Password</label>
                <td><input type="password" placeholder="********" id="password"></input><br>
            </tr>
            <tr>
                <td><label for="name">Name</label>
                <td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
            </tr>
            <tr>
                <td></td>
                <td><button type="submit" class="btn btn-primary">Sign Up</button></td>
            </tr>
        </table>
    </form>
</div>

编辑： 是的。使用center-block 引导类。

【讨论】：

我可以不使用垂直对齐来做到这一点吗？或者我可以使用边距：自动自动；或其他一些方法来实现这一点
@user3930050 已更新...

【解决方案2】：

您必须将样式应用于表单

   <style>
        form {
        margin: 15% 40% 0;
        }
    </style>

【讨论】：

【解决方案3】：

几个解决方案：

您可以使用flex 及其属性（justify-content 和align-items），例如vertical-align，并将这些行添加到您想要垂直对齐的孩子的每个父母（例如：.center）

.center {
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:center;
}

如果您不喜欢flex 的解决方案，可以将父级的位置设置为“相对”（position:relative;），并将此代码插入子级：

.center {
    position:relative;
}

.center table {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

希望对您有所帮助 =]

【讨论】：