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

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

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导航菜单的二级下拉菜单鼠标悬停显示jQuery怎...

bootstrap的导航菜单默认都是通过鼠标点击来展开的,有时我们为了让浏览者有更好的访...

jQuery如何获取当前元素的ID

jQuery是一个优秀的JavaScript库,给前端页面的制作带来了极大的方便,鲶鱼系...

鲶鱼系统如何使用bootstrap4以及其辅助标签

Catfish(鲶鱼) CMS从4.9.3版开始原生支持bootstrap4,Catfi...

关于捐助款项的使用情况通报

自鲶鱼系统创建开始,截止于2019年7月31日,累计收到捐助款项179.46元(包含截止...

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

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

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