bootstrap4如何实现div的水平居中以及垂直居中

Release time：2019年07月20日 Author：Catfish CMS Reading volume：479

bootstrap是一款十分流行的前端组件库，我们在制作模板的时候，使用bootstrap会提高工作效率，减少自己写css样式的麻烦。鲶鱼CMS系统的官方主题大部分是使用bootstrap来制作的，当然也有少部分是使用其他前端框架实现。从主题制作的实际经验来看，个人认为首推使用bootstrap，这款全球最多人应用的前端框架之所以会受到欢迎自然是有其相对于其他前端框架优越的地方。截止本文发布，bootstrap的最新版为4.3.1版，这篇文章我们介绍的是bootstrap4如何来实现div的水平居中和垂直居中。

为什么要介绍bootstrap4如何实现div的水平居中和垂直居中？因为在实际的鲶鱼CMS主题制作过程中，我们可能会遇到类似需要居中的问题，而我们发现使用bootstrap4来实现水平垂直居中十分方便，在这里记录方便大家查阅。

我们先来看代码：

<div class="container">
    <div class="row justify-content-center bg-light" style="height: 500px">
        <div class="align-self-center">
            水平垂直居中
        </div>
    </div>
</div>

上面的代码就可以实现让文字“水平垂直居中”在div内实现水平且垂直居中，您可以复制这段代码实际测试一下。这里的“bg-light”是设置div背景色的，这里为了能看清楚效果，所以加了这个，实际使用中您可以删除“bg-light”。这里的关键一点是外层div的高度设置，我们这里使用“style="height: 500px"”来设置外层div的高，这里高度设置为500px，您在实际使用中可以调整。

好了，用bootstrap4来实现水平垂直居中是不是显得很简单。

Original article, reproduced please specify：bootstrap4如何实现div的水平居中以及垂直居中 | Catfish(鲶鱼) CMS

Reward

Previous：鲶鱼CMS的页面设置中如何增减数量