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

Reward

I want to comment Sign in to post a comment


Latest release

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

bootstrap是一款十分流行的前端组件库,我们在制作模板的时候,使用bootstra...

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

Catfish(鲶鱼) CMS自版本4.9.6开始支持对页面设置可增减操作,我们来看一下...

网站二次开发的正确姿势

经常有用户朋友问我关于二次开发的问题,现在将这个问题比较详细地说一下。 过来问我关于二...

css样式处理超长的连续字母或数字,实现自动换行

有的伙伴建站以后,会在自己的网站分享一些链接,并且有些链接是超长的,由于链接一般都是由字...

绿色目录主题标准版 GreenD theme for Catfish...

主题名称:绿色目录主题标准版 GreenD theme for Catfish-CMS主...

MIME在form表单的文件上传中的应用

我们在制作文件上传时,通常会使用HTML标签“<input type="...

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 - 2019 Catfish(鲶鱼) CMS
Catfish(鲶鱼) CMS〖181836340〗 Catfish(鲶鱼) CMS 二群〖292598750〗

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