flexbox中的中心文本，它是bootstrap行的子容器

Question

我想知道是否有人可以帮助在关于页面内的文本中心，而不改变动态页面高度计算。

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

这是玉/帕格代码

 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”中间居中文本，以便在页面画布中完美对齐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 flexbox类qazxsw poi

您可以了解更多关于css flex-box here的信息

Answer 2

我以百分比的形式添加了wb_main高度，设置了最小值。然后添加了d flex和h 100类，现在垂直对齐工作完美。