作为 bootstrap 行子容器的 flexbox 中的居中文本

Question

我想知道是否有人可以在不更改动态页面高度计算的情况下帮助将文本居中放置在 body 内的 about 页面上。

这是页面： https://protasov.by/contacts/

这里是jade/pug代码

 section.container-fluid
            .row(style="padding-top:20px;").centered-form.center-block
                section.container(style="display: flex; align-items: center; justify-content: center;").col-md-10.text-center
                    .wb-stl-normal(style="margin: auto; align-self: center;")
                        p
                            em TEXT
                            |  TEXT TEXT
                            br
                            span.wb-stl-small TEXT TEXT
                        br

我尝试了不同的方法，但无法获得任何可见的结果来帮助我将文本居中放置在块 "section.container-fluid" 的中间，以便它在页面 canvas 中完美对齐 H/V =].

Answer 1

您可以使用 bootstrap flex-box 类

水平对齐使用

.d-flex .align-content-{x} 其中 'x' 可以是 center、around 或 between

要垂直对齐使用

.d-flex .align-items-{x} 其中 'x' 可以是 center、stretch 或 baseline

参考 bootstrap flex-box 类 here

您可以了解更多 css flex-box here

Answer 2

我在wb_main中添加了百分比高度，设置最小值。 然后添加了 d flex 和 h 100 类，现在垂直对齐完美无缺。