Html 使窗体垂直和水平对齐

我的任务是制作一个单页表单，它只包含两个输入表单和一个保存按钮

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

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

         BUTTON
   </form>
</div>

供水平中心使用 保证金：0px自动0px自动

和垂直中心 垂直对齐：居中

如果这不起作用 在顶部使用填充物

---

并从底部移除填充物

如果形状不再改变，意味着高度不会改变，则不需要动态解决方案。只需在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);

---

如果知道元素的宽度和高度，可以使用

calc

。在您的情况下，如果您的

表单

宽200px，高30px，您可以设置

页边距顶部：计算（50%-15px）

和

页边距左侧：计算（50%-100px）

。 在这个演示中，我使用vh和vw而不是百分比。 如果希望表单元素堆叠在一起，可以像我在演示中所做的那样在每个元素的末尾放置一个

，或者可以指定

显示：块到每个表单元素

注意：
align
属性在HTML5中已过时，我假设如果您的e使用引导，您的e将使用该属性


.col-md-9{
宽度：100vw；
高度：100vh；
}
形式{
高度：30px；
边际顶部：计算（50vh-15px）；
宽度：200px；
左边距：计算（50vw-100px）；
}





按钮
此操作无需知道表单的大小。500px仅用于演示目的。对于普通站点，将此更改为100%


.container main{
显示：表格；
宽度：100%；
高度：500px；
}
·货柜中心{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
.货柜中心跨度{
显示：内联块；
}





按钮
参考此垂直对齐：居中？垂直对齐：中间；这将使其与父容器对齐。如果不将更正添加为新注释，请编辑您的答案
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);