bootstrap的div内容垂直水平居中显示

最新推荐文章于 2021-02-09 22:01:54 发布

原创最新推荐文章于 2021-02-09 22:01:54 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

WEB前端同时被 2 个专栏收录

112 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

本文介绍了一种使用Flexbox布局实现在div容器内span元素垂直居中的方法。通过设置display为flex，flex-direction为column，justify-content为中心对齐，使得内部span元素能够水平垂直居中显示。

主要为了实现span在div中垂直居中

下面代码

 <div class="col-md-4 bg-danger">
                        <div style="display: flex; flex-direction: column; justify-content: center; text-align: center; height: 100%"> 
                            <span style="font-size:36px">100.00%</span> 
                        </div> 
                    </div>

下面是效果