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

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

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


Latest release

鲶鱼cms系统和鲶鱼blog系统怎么填写公安备案号和ICP备案号

在实际建站过程中,往往需要进行网站备案,那么当我们备案之后,需要按要求在自己网站上放上备...

关于鲶鱼Blog系统2.3.21版以后版本升级的说明

鲶鱼Blog系统可以在后台上传升级包进行升级,有些用户可能会很长时间没有升级,这样可能会...

鲶鱼CMS和鲶鱼Blog自制登录页面代码怎么实现

我们在《鲶鱼CMS和鲶鱼Blog怎么自定义登录页面》一文里面介绍了怎么在制作主题的时候自...

鲶鱼CMS和鲶鱼Blog怎么自定义注册页面

我们在《 鲶鱼CMS和鲶鱼Blog怎么自定义登录页面》这一篇里面介绍了如何自己制作一个登...

鲶鱼CMS和鲶鱼Blog怎么自定义登录页面

我们在使用鲶鱼cms和鲶鱼blog时,有的时候希望根据自己的需求设计登录页面,该怎么办?...

Catfish(鲶鱼) CMS和Catfish(鲶鱼) blog主题...

第五版Catfish(鲶鱼) CMS和Catfish(鲶鱼) blog主题制作手册已经正...

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.90