使用display：table，display：table-cell，display：table-row在bootstrap中垂直对齐表单及其相对内容

Question

我在引导程序中对齐表单时遇到问题基本上我的问题并不像问题所暗示的那样可怕，让我详细说明：

我有非常简单的标记，有点像这样：

<section class="contactus" id="contactus">
            <div class="container">

                <div class="row">

                    <div class="col-md-6 text-center">
                        <address>
                              No. 311,<br> 
                            11th Main, <br>
                            120 Feet Road, <br>
                            indonasia<br>
                              calcutta,<br>
                            pondichury<br>
                        </address>
                    </div>

                    <div class="col-md-6">

                        <form action="" role="form">

                            <div class="form-group">
                                <label for="name">Full Name</label>
                                <input type="text" name="name" id="name" class="form-control" placeholder="NAME">
                            </div>

                            <div>
                                <button class="btn btn-success pull-right">SEND</button>    
                            </div>  
                        </form>
                    </div>
                </div>


            </div> <!-- end of container -->
        </section>

也非常简单的css：

.contactus{
    height: 100%;
    width: 100%;
}

.contactus .container{
    display: table !important;
    height: 100%;
    /*width: 100%;*/
    vertical-align: middle;
}

.contactus .row{
    display: table-row !important;
    vertical-align: middle;
    height: 100%;
    background: yellow;
}

.contactus .col-md-6{
    display: table-cell !important;
    background: red;
    height: 100%;
    vertical-align: middle;
}

现在上面的css实际上想要做的是将两个col-md-6垂直对齐在.contactus类的中心，当然在任何给定的屏幕上都需要100％的高度。

并且在每个col-md-6内部，内容应该水平地位于col-md-6的中间。

两者都不会发生。

现在我做了一些测试，这是令人惊讶的结果：

首先让我发布一个指向整个代码的链接：

code link : (load the link in your browser and wait for 10 secound for the code to appear)

我将使用和不使用bootstrap保持相同的CSS，所以使用bootstrap：

并且没有bootstrap（只需删除cdn）

现在没有引导程序，我正在得到我想要的东西。为什么？因为

display:table;
display:table-cell;
display:table-row;

这三个函数串联起来，给我编码的结果。

所以bootstrap会发生什么：

答案：我今天早上发现，css中的float属性打破了显示链（浮动元素使其显示设置为阻止），实际上在我的代码我有2个col-md-6，它们只是引擎盖下的浮动元素。

因此，我几乎就在那里，但还没有。

更重要的一点是：

现在，如果我完全脱掉了col-md-6并且在css中添加了以下代码：

address, form{
    display: table-cell !important;
    background: red;
    height: 100%;
    vertical-align: middle;
}

我再次得到我想要的结果但是，如果没有col-md-6，我的布局会呈现无响应，那么我如何解决这个问题？

在一天结束时我想要的只是一个响应式设计和垂直对齐。

谢谢。

亲切的问候。

亚历山大。