Html 垂直中心div

我有我的CSS/HTML代码

我如何对齐它，使其垂直居中

HTML

<div class="container" data-ng-controller="publicHome">
    <div class="col-sm-4 col-sm-offset-4">// <--- I would like this div vertically centered!        
        <form data-ng-submit="signIn()" class="form-horizontal">
            <div class="form-group">
                <input type="email" data-ng-model="email" placeholder="email" class="form-control input-lg">
            </div>
            <div class="form-group">
                <input type="password" data-ng-model="password" placeholder="password" class="form-control input-lg">
            </div>
            <label>
            remember me
            <input type="checkbox" data-ng-model="rememberMe" class="signInCheckbox">
            </label>
            <div style="float:right; color:#C0C0C0;">
                <a data-ng-click="">forgot password?</a>
            </div>
            <div class="form-group center-block">
                <button type="submit" class="btn btn-success btn-lg center-block">sign in</button>
            </div>
        </form>
        <div class="alert alert-danger col-md-8 col-md-offset-2 text-center" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> incorrect credentials
        </div>
    </div>
</div>

将此添加到您的div：

.customdiv {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate 0, -50%);
    -o-transform: translate(0, -50%);
}

这是给你的家长部门的：

.parentdiv {
    position: relative;
}

---

拆下右侧浮动阀

.forgotPassword {
    /* float: right; */
    color: #C0C0C0;
}

也许你想这么做？

---

这应该行得通。添加以下CSS：

.container {
    width: 100%;
    height: 100%;
    position: relative;
}

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

---

您只需在

.sign

Div的两侧添加两个空列即可

<div class="col-sm-4"></div>
  <div class="col-sm-4 signIn">
   // your form here
  </div>
<div class="col-sm-4"></div>

//你的表格在这里

引导网格的工作基础是所有列的总和为12。

---

警报具有

页边距底部：20px

。顶部的

需要

页边距顶部：20px

，以便框垂直居中

HTML

...
<div class="col-sm-4 col-sm-offset-4 margin-top-20">
...

---

可能与@Steve重复垂直和水平定心之间有很大的差异…是错误的。这一个应该是它@Steve，我知道如何正常居中一个div，但因为我使用的是bootstrap，它给了我不想要的结果！很抱歉，我发布的示例不适用：（（链接）查看我答案中的提琴：）如果我没有使用bootstrap，那么答案很好，但由于某些原因，它与bootstrap不一样！？需要将“忘记密码”保留在右侧！你喜欢居中哪个div？更新了我的问题以显示我想要垂直居中的哪个div：）不幸的是，现在不是了，看一看：请随意编辑链接中的代码：）我想你误读了主题，我试图纠正的是垂直定位，而不是水平定位！

...
<div class="col-sm-4 col-sm-offset-4 margin-top-20">
...

.margin-top-20 {
    margin-top: 20px;
}