垂直中心div

我有我的CSS/HTML代码here。垂直中心div

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

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; 
}

来源

2015-09-26 Karl Morrison

http://stackoverflow.com/questions/114543/horizontally-center-a-div的可能重复-in-a-div？rq = 1 – Steve

@Steve垂直和水平方向有很大的区别l居中...... –

sry错了。这应该是它http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div – Steve

添加到您的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

来源

2015-09-26 19:51:02

对不起，没有与我张贴的例子:(（链接） –

检查出在我的答案FIDDLE :) – 2015-09-26 19:54:48

好的答案，如果我不使用bootstrap，但它不工作，如bootstrap说一些原因！？ –

删除浮动权。

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

也许你正在试图做到这一点？ https://jsfiddle.net/2jgrzqnh/

来源

2015-09-26 20:01:07

更新我的问题，以显示我想要垂直居中的哪个下潜:) –

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

来源

2015-09-26 20:16:02

不幸的是，它不是再次，请看看：http：// www。 bootply.com/rKNvoqGu19随意编辑链接中的代码:) –

您只需要在.signIn Div的两侧添加两个空柱。

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

白手起家电网工程，所有列加起来12 http://www.bootply.com/X19w9RZawU

来源

2015-09-26 20:37:46 ProEvilz

我认为你误读了这个话题，这是我试图修复的垂直定位，而不是水平的！ –

警报有margin-bottom: 20px的基础上。顶部的<div>需要margin-top: 20px，以便盒子垂直居中。

HTML

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

CSS

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

Bootply

来源

2015-09-26 20:55:04 Sun

垂直中心div

回答

相关问题