Question

我已获得我的CSS / HTML代码here。

如何对齐它以使其垂直居中？

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>

CSS

.signInCheckbox {
    margin-left: 5px;
}

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

Answer 1

将此添加到您的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%);
}

这是你的父母div：

.parentdiv {
    position: relative;
}

FIDDLE

Answer 2

向右移除浮动。

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

也许你正试图这样做？ https://jsfiddle.net/2jgrzqnh/

Answer 3

这应该有效。添加此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%);
}

Answer 4

您只需在.signIn Div。

的任意一侧添加两个空列

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

Bootstraps网格的工作原理是所有列的总和为12。 http://www.bootply.com/X19w9RZawU

Answer 5

警报有List。顶部的margin-bottom: 20px需要<div>，以便框垂直居中。

HTML

margin-top: 20px

<强> CSS

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

Bootply

中心div垂直

5 个答案: