Center Progress Bar в пределах карты Bootstrap

Question

Я пытаюсь центрировать индикатор выполнения на карте начальной загрузки, но безрезультатно.

Есть ли способ отцентрировать его, не используя абсолютную позицию?

Кто-нибудь может мне помочь?

Демо

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

Добавьте d-flex justify-content-center классы к вашему myprogressbar div.

.myprogressbar{

  position: relative;

}

.progress {
  position: relative;
  z-index: 5;
  background: #ECF2F9;
  border-radius: 20px;
  display: inline-block;
}

.progress-text {
  position: absolute;
  font-family: 'Noto Sans', sans-serif;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  top: 0;
  left: 0;
  user-select: none;
}

.progress, .progress-bar, .progress-text {
  width: 200px;
  max-width: 200px;
  height: 20px;
}

.progress .progress-text:first-child {
  z-index: 5;
  line-height: 20px;
  color: white;
}

.progress .progress-text:last-child {
  z-index: 10;
  line-height: 20px;
  color: black;
}

.progress-bar {
  overflow: hidden;
  position: relative;
  z-index: 10;
  border-radius: 12px;
  width: 0;
  -moz-transition: width .2s linear;
  -webkit-transition: width .2s linear;
  -o-transition: width .2s linear;
  transition: width .2s linear;
}

/* Aqua Style */

.progress.aqua .progress-bar {
  /* background-color: #00baba; */
  background-color: #4780C5;
  background-image: -moz-linear-gradient(left, #d1fffb 0%, #4780C5 100%);
  background-image: -webkit-linear-gradient(left, #d1fffb 0%, #4780C5 100%);
  background-image: -o-linear-gradient(left, #d1fffb 0%, #4780C5 100%);
  background-image: -ms-linear-gradient(left, #d1fffb 0%, #4780C5 100%);
  background-image: linear-gradient(to right, #d1fffb 0%, #4780C5 100%);
  background-size: 200px 20px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<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 d-flex justify-content-center">
            <div class="progress aqua">
                <div class="progress-text"></div>
                <div class="progress-bar">
                    <div class="progress-text"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

Демо используйте для этого flex ... используйте этот стиль для тела вашей карты, и это будет работать

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

Или вы можете добавить классы, такие как d-flex justify-content-center align-items-center, это также отлично работает .

Answer 3

Что по этому поводу:

<div class="myprogressbar" style="margin-left: 25%;">