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

用于水平中心使用 margin：0px auto 0px auto;

和垂直中心 vertical-align：center;

如果这个工作在顶部使用填充并从底部删除填充

Answer 2

如果表单不再发生变化，意味着身高不会发生变化，那么你真的不需要动态解决方案。只需用vh单位中的margin / padding-top来摆弄。当你这样做时，确保它没有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中已过时，如果您使用自举，我会假设您使用

。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

这不需要知道表单的大小。 500px仅用于演示目的。对于普通网站，将其更改为100％。

.container-main {
    display: table;
    width: 100%;
    height: 500px;
}
.container-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.container-center span {
  display: inline-block;
}

<div class="container-main">
 <div class="container-center">
  <span>
   <form>
    <input/>
    <br/>
    <input/>
    <br/>
    <button>Button</button>
   </form>
  </span>
 </div>
</div>

使表格垂直和水平对齐

4 个答案: