视口中的中心项而不是包含引导列

Question

我正在尝试将项目置于视口中心而不是包含引导列。图中显示的段落位于引导列中，并为其分配了.col-md-4类。当我将鼠标悬停在每张图片上时，我希望下面的段落在视口中居中。相反，似乎段落在引导列中保持对齐。下面是我对该段落的当前CSS，我在上面添加了一个链接，以更好地说明问题。

.TestimonyParagraph{
    font-size: 20px;
    margin-top: 15px;
    position: relative;
    width: 50vw;
    left: 0;
    right: 0;
    padding: 15px;
    color: #ffffff;
    background-color: #898989;
    display: none;
}

.home-features__box:hover + .TestimonyParagraph{
    display: block;
}

Answer 1

您可以使用

margin: 0 auto;

以传统方式。 否则您可以使用弹性框： -

display: flex;
justify-content: center;

提供代码结构以获得更好的答案

Answer 2

您是否尝试添加

margin:0 auto;

到TestimonyParagraph？另请查看： Center a column using Twitter Bootstrap 3

如果没有，请发布您的结构的Jsfiddle或Codepen，以便我们提供更好的帮助。

Answer 3

由于您为此元素设置了width: 50vw;，因此您只需使用left: 25vw;（25左+ 50为div + 25为右为100vw - 全宽，因此可以使其居中）。

但是，如果父元素没有跨越整个宽度（图片中似乎是这种情况），那么最好使用百分比：left: 25%和{{ 1}}。