Question

所以我浏览了十亿个论坛和帖子，但仍无法得到我正在寻找的解决方案！

我有一些文字和按钮，我希望使用Bootstrap 3在div中水平和垂直居中。

我有一些看起来像这样的代码：

    <div class="Home" id="Home">
        <div class="row">
            <div class="col-md-4">
            </div>
            <div class="col-md-4 col-xs-12">
                <p class="home">TEXT TO BE VERTICALLY CENTERED</p>
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </div>

（请不要教我使用补偿。我知道我应该使用它们，我只是使用这3个div进行测试目的哈哈）

现在我使用了这样的CSS：

.vertical-center {
min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-)       */
display: flex;
align-items: center;
}
.text-vcenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}

然而无济于事。我的文字（和按钮）只是水平居中在页面顶部。我知道这可能是一个简单的解决办法，但现在已经杀了我几个星期了！我真的把它作为最后的手段。我甚至研究了其他网站如何垂直对齐项目，但没有任何工作。

请记住，它需要保持其响应能力。我不想要固定的解决方案。

我在某处读过一个JS解决方案可能就是这个伎俩？我现在真的很高兴。

修改

How do I vertically center text with CSS?

无法解决我的问题...

仅适用于单行文字，因为我们设置了行＆gt; s＆gt;高度与包含框元素的高度相同。

Answer 1

你需要使用bootstrap吗？到目前为止，你所拥有的只是简单地将一些文本集中在一起，这令人难以置信。

这就是你所需要的：

#centered {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
}

http://codepen.io/anon/pen/xGEvbx

有关使用css进行居中的更多信息，请参阅this article。

如何在保持响应性的同时垂直居中div中的项目？

1 个答案: