html - 将容器内部的元素居中时出现问题

我正在努力将元素放置在容器内。

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

到目前为止，一切正常，但是以某种方式我无法将计数器放在容器的中心。

http://codepen.io/HendrikEng/pen/NAOmkr

它应该是这样的：



的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;
}

最佳答案

.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

Centering with absolute positioning and transform properties

关于html - 将容器内部的元素居中时出现问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38807510/