html - Bootstrap 卡片中的中心进度条

Question

我试图将进度条置于 bootstrao 卡的中心，但无济于事。

有没有办法在不使用绝对位置的情况下使其居中？

谁能帮帮我？

Demo

HTML

<div class="card bg-light mb-3" style="width:400px; height:400px">
    <div class="card-header">Header</div>
    <div class="card-body">
        <div class="myprogressbar">
            <div class="progress aqua">
                <div class="progress-text"></div>
                <div class="progress-bar">
                    <div class="progress-text"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Demo为此使用 flex ...将这种样式用于您的卡体，这将起作用

display: flex; justify-content: center; align-items: center;

或者您可以添加像 d-flex justify-content-center align-items-center 这样的类，这也可以正常工作。