将容器内的元素居中的问题

Question

我很难在容器中定位元素。

我在我的网站上找到了一个我修改并实施的计数器。

到目前为止一切正常，但不知何故我无法将计数器置于其容器内的中心。

它应该是这样的：

html:

<div class="c-counter">
    <div class="c-counter__progress-bar c-counter__item">
        <div class="c-counter__single-bar">
            <h6 class="c-counter__headline">Jahre Erfahrung</h6>
            <p class="c-counter__text">Aber wir lernen nie aus.</p>
            <span class="c-counter__bar" data-percentage-value="19" data-value="19" style="width: 19%; background-color: rgb(77, 171, 252);"></span>
        </div>
    </div>
    <div class="c-counter__progress-bar c-counter__item">
        <div class="c-counter__single-bar">
            <h6 class="c-counter__headline">Abgeschlossene Projekte</h6>
            <p class="c-counter__text">Und wir haben noch viel mehr vor.</p>
            <span class="c-counter__bar" data-percentage-value="568" data-value="568" style="width: 568%; background-color: rgb(77, 171, 252);"></span>
        </div>
    </div>
    <div class="c-counter__progress-bar c-counter__item">
        <div class="c-counter__single-bar">
            <h6 class="c-counter__headline">Zufriedene Kunden</h6>
            <p class="c-counter__text">Wir wollen mehr davon.</p>
            <span class="c-counter__bar" data-percentage-value="78" data-value="78" style="width: 78%; background-color: rgb(77, 171, 252);"></span>
        </div>
    </div>
    <div class="c-counter__progress-bar c-counter__item">
        <div class="c-counter__single-bar">
            <h6 class="c-counter__headline">Prozent Ambitioniert</h6>
            <p class="c-counter__text">Und unermüdlich inspiriert</p>
            <span class="c-counter__bar" data-percentage-value="100" data-value="100" style="width: 100%; background-color: rgb(77, 171, 252);"></span>
        </div>
    </div>
    <div class="c-counter__progress-bar c-counter__item">
        <div class="c-counter__single-bar">
            <h6 class="c-counter__headline">Stufen Bis zum 4. Stock</h6>
            <p class="c-counter__text">Wir haben auch einen Fahrstuhl</p>
            <span class="c-counter__bar" data-percentage-value="88" data-value="88" style="width: 88%; background-color: rgb(77, 171, 252);"></span>
        </div>
    </div>
</div>
</div>

css:

.c-counter {
    background: grey;
    margin-top: span(0.8);
    margin-bottom: span(.8);
    display: inline-block;
}
.c-counter__progress-bar {
    display: none;
}
.c-counter__container {
    .c-counter__item {
        display: inline-block;
        text-align: center;
        .chart {
            position: relative;
            width: 155px;
            height: 175px;
            span {
                font-weight: bolder;
                font-size: 2.5em;
                line-height: 2.5em;
                top: 50px;
                left: 50px;
                position: absolute;
                height: 100px;
                width: 100px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                background-color: black;
                color: white;
            }
        }
    }
}
.c-counter__headline {
    font-size: 2em;
    background: yellow;
    margin-top: 50px;
    max-width: 250px;
    line-height: .9em;
}
.c-counter__text {
    background: green;
    font-size: 1.2em;
}
.c-counter__item {
    position: relative;
    background-color: pink;
    width: 250px;
    max-width: 250px;
    height: 200px;
    max-height: 200px;
    margin-left: 100px;
}

Answer 1

脱下宽度：

.c-counter__container .c-counter__item .chart {
   height: 175px;
   position: relative;
}

并且 "left" 属性的更改：

.c-counter__container .c-counter__item .chart span {
    background-color: black;
    border-radius: 50px;
    color: white;
    font-size: 2.5em;
    font-weight: bolder;
    height: 100px;
    left: 76px;
    line-height: 2.5em;
    position: absolute;
    top: 50px;
    width: 100px;
}

这里是修改后的代码： http://codepen.io/Raddy/pen/akRAyN

Answer 2

.c-counter__container .c-counter__item .chart {
    position: relative;
    width: 100%;                       /* adjusted */
    height: 100%;                      /* adjusted */
}

.c-counter__container .c-counter__item .chart span {
    font-weight: bolder;
    font-size: 2.5em;
    line-height: 2.5em;
    top: 50%;                          /* adjusted */
    left: 50%;                         /* adjusted */
    transform: translate(-50%,-50%);   /* new; explanation below; */
    position: absolute;
    height: 100px;
    width: 100px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background-color: black;
    color: white;
}

Revised Codepen

将容器内的元素居中的问题

Problems centering elements inside of a container

html

css

position