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

Release time:2019年07月20日 Author:Catfish CMS Reading volume:8730

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来实现水平垂直居中是不是显得很简单。

Reward

I want to comment Sign in to post a comment


Recommended reading

为抗击新型冠状病毒感染肺炎疫情出一份力的通知

据国家卫健委报告,新型冠状病毒感染肺炎确诊人数的日增加数量已经从前几日的每天几十人突然加...

Latest release

为抗击新型冠状病毒感染肺炎疫情出一份力的通知

据国家卫健委报告,新型冠状病毒感染肺炎确诊人数的日增加数量已经从前几日的每天几十人突然加...

关于赞助款使用情况的通报

自2019年7月31日起,至2020年1月28日止,累计收到赞助款120元8角8分,目前...

鲶鱼cms主题(模板)制作如何调用分组的幻灯片

我们在《鲶鱼cms如何使用幻灯片分组》中介绍了怎么使用幻灯片的分组,这一篇我们将进一步学...

鲶鱼系统主题(模板)制作的幻灯片代码实现

鲶鱼CMS可以在后台方便地设置幻灯片,鲶鱼Blog系统也可以在后台开启幻灯片的使用(详见...

鲶鱼Blog系统如何使用幻灯片

鲶鱼CMS系统的幻灯片设置是原生开启的,而鲶鱼Blog系统默认是关闭幻灯片的,如果要使用...

鲶鱼cms如何使用幻灯片分组

鲶鱼cms自从版本4.9.18开始支持幻灯片分组,这会给某些需要在页面展示多组幻灯片的应...

How to use the Catfish CMS system

Section 1: How to add articles

Management background is composed of five bl...

Section 2: to the article to add c...

In the previous section, we talked about how...

Section 3: Add a menu to your site

In the previous section we talked about how ...

Section 4: Page Setup

To the last section we have learned to use t...

Section 5: Change website name, LO...

By the end of the previous section, we have ...

Copyright © 2015 - 2020 Catfish(鲶鱼) CMS
Catfish(鲶鱼) CMS〖181836340〗 Catfish(鲶鱼) CMS 二群〖292598750〗

   I want to leave a message
Catfish(鲶鱼) CMS V 4.9.63