0
プロパティを設定しても、円内のテキストは正確な中心に移動せず、放射状のグラフ自体はdivの中心です。誰に何が間違っているとどのようにこれを修正するには？放射状の円グラフ（幅と高さが固定されています）が水平と垂直の中心に揃っていません
/**
* Card Styles
*/
.card {
background-color: #fff;
/* margin-bottom: 1.6rem; */
}
.card__padding {
padding: 1.2rem;
}
.card__content {
position: relative;
}
/* card article */
.card__article a {
text-decoration: none;
color: black;
}
.card__article p {
text-align: center;
text-decoration: none;
color: black;
}
/*radial progress bar*/
.pie-wrapper {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
margin-left: 50%;
border: 10px solid #ddd;
border-radius: 50%;
margin: 0 auto;
}
.pie-wrapper .pie {
clip: rect(0, 200px, 200px, 0px);
height: 200px;
width: 200px;
margin: -10px 0 0 -10px;
}
.pie-wrapper .pie .half-circle {
border: 10px solid #3498db;
clip: rect(0, 100px, 200px, 0);
height: 200px;
position: absolute;
width: 200px;
border-radius: 50%;
}
.pie-wrapper .label {
position: absolute;
top: 12.5%;
right: 1%;
width: 180px;
height: 180px;
color: black;
cursor: default;
font-size: 2em;
line-height: 2.5em;
border-radius: 50%;
}
.pie-wrapper .shadow {
width: 100%;
height: 100%;
border: 20px solid #bdc3c7;
border-radius: 50%;
}
.pie-wrapper.progress-full .pie {
clip: inherit;
}
.pie-wrapper.progress-full .pie .right-side {
display: block;
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
transform: rotate(220deg);
}
div,
div:before,
div:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}<div class="card radius shadowDepth1">
<div class="card__content card__padding">
<article class="card__article">
<h2><a href="#">Hello world</a></h2>
<div class="pie-wrapper progress-full">
<span class="label">2017</span>
<div class="pie">
<div class="left-side half-circle"></div>
<div class="right-side half-circle"></div>
</div>
</div>
<p>Bounjour, tout le monde</p>
</article>
</div>
</div>