使窗体垂直和水平对齐

Question

我有一个任务，使一个页面的形式，它只包含两个输入形式和一个保存按钮。

我把它放在col md-9对齐中心。但是窗体只是水平居中，我也想让它垂直居中。

<div class="col-md-9 no-float" align="center">
   <form>
         FIRST INPUT HERE
         SECOND INPUT HERE

         BUTTON
   </form>
</div>

和

.col-md-9
        {
            display: table-cell;
            width: 75%;
            height:100vh;
        }
.col-md-9.no-float {
            float: none; 
        }

Answer 1

对于水平中心，使用页边距: 0px auto 0px auto；

对于垂直中心垂直对齐:中心；

如果此操作有效，请在顶部使用填充，并从底部删除填充

Answer 2

如果表单不再改变，这意味着高度不会改变，那么就不需要动态解决方案了。只需摆弄vh单位的页边距/填充顶部即可。当你这样做的时候，确保它的高度不是100vh。

例如：

.col-md-9 {
   height: auto;
   margin-top: 20vh; // or padding
}

// add mediaqueries for more specific stuff

它不是完美的，但它工作得很好。

否则，您可以使用jQuery动态完成此操作。

var browserHeight = $(window).height(),
    colHeight     = $('.col-md-9').outerHeight(),
    columnMargin  = (browserHeight / 2) - (colHeight / 2);

    // set margin-top for column        
    $('.col-md-9').css('margin-top', columnMargin);

Answer 3

如果您知道元素的宽度和高度，则可以使用calc。在你的例子中，如果你的form是200px宽，30px高，你可以设置一个margin-top: calc(50% - 15px)和margin-left: calc(50% - 100px)。在这个演示中，我使用了vh和vw，而不是百分比。如果希望将表单元素堆叠在一起，可以像我在演示中所做的那样在每个元素的末尾放置一个<br/>，也可以将display: block;分配给每个表单元素。

注意：的align属性在HTML5中已经过时了，如果你使用的是Bootstrap，我假设你正在使用它。

​

.col-md-9 {
  width: 100vw;
  height: 100vh;
}
form {
  height: 30px;
  margin-top: calc(50vh - 15px);
  width: 200px;
  margin-left: calc(50vw - 100px);
}

<section class="col-md-9">
  <form>
    <input/>
    <br/>
    <input/>
    <br/>
    <button>Button</button>
  </form>
</section>

​