css - 如何将卡片内的项目居中

Question

您好，我想知道如何将内容集中在我尝试使用 d-flex 的卡片中，并通过对齐内容和项目来证明内容，但它仍然无法正常工作我也有一个 h-100，所以我不确定出了什么问题

代码：

<div class="col-lg-3 col-md-6 col-sm-12">
            <div class="card info-box-2 h-100" style="border-radius: 1.75rem;">
                <div class="body">
                    <div class="content"  style="justify-content: center; text-align: center; display: contents;">
                        <div class="image"><img src="https://www.flaticon.com/svg/static/icons/svg/1251/1251768.svg" alt="" width="25%"></div>
                        <div class="number"><span style="font-size:20px;">Leave Entitlements</span></div>
                            <div class="text">Manage Leave Entitlements for all registered users</div>
                            <div class="text"><a href="" class="btn btn-primary btn-simple btn-round">Entitlements</a></div>
                    </div>
                </div>
            </div>
        </div>

这也是从视图中看起来的样子 ps 我正在为此使用引导程序

编辑：添加了图像描述

标签： cssflexbox