コンテナより大きな文字を中央に配置する方法

Question

私は水平と垂直の両方にセンタリングしたいアイコンがあります。

codepenを参照してください下のスニペット：

div { 
 
    border: 1px solid black; 
 
} 
 
.icon-placeholder { 
 
    height: 34px; 
 
    overflow: hidden; 
 
    width: 34px; 
 
} 
 
.icon { 
 
    color: hotpink; 
 
    font-size: 400%; 
 
} 
 
.icon::before { 
 
    content: '+'; 
 
}

<div class="icon-placeholder"> 
 
    <span class="icon"></span> 
 
</div>

どのように私は関係なく、.iconのフォントサイズのことを行うことができます。

私は試しましたtransform、position: absolute、display: table運がありません。フレックスを使うことはできません。

Answer 1

を使用してそれを達成することができ、+は必ずしもフォントに応じて、最初の場所に集中されていません。

div { 
 
    border: 1px solid black; 
 
} 
 

 
.icon-placeholder { 
 
    height: 34px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 34px; 
 
} 
 

 
.icon { 
 
    color: hotpink; 
 
    font-size: 400%; 
 
} 
 

 
.icon::before { 
 
    content: '0'; 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 50%; 
 
    bottom: 50%; 
 
    transform: translate(50%, 50%); 
 
}

<div class="icon-placeholder"> 
 
    <span class="icon"></span> 
 
</div>

Answer 2

あなたはしかし注意することがtransformとabsoluteポジショニングもので

div { 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
} 
 

 
.icon-placeholder { 
 
    height: 34px; 
 
    overflow: hidden; 
 
    width: 34px; 
 
    position: relative; 
 
} 
 

 
.icon { 
 
    color: hotpink; 
 
    font-size: 400%; 
 
    margin-top: -10%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    left: 50%; 
 
} 
 
.icon::before { 
 
    content: '+'; 
 
} 
 

 
.plus-symbol{ 
 
    font-size: 400%; 
 
    outline: dotted 1px red; 
 
    color: hotpink; 
 
} 
 

 
.left, .right{ 
 
    width: 45%; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
} 
 

 
.left{ 
 
    float: left; 
 
} 
 
.right{ 
 
    float: right; 
 
} 
 

 
.custom-plus-icon, .custom-plus-icon:before{ 
 
    position: absolute; 
 
    width: 10%; 
 
    border-radius: 1px; 
 
    background-color: hotpink; 
 
    height: 80%; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 
.custom-plus-icon:before{ 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: rotate(90deg); 
 
}

<div class="left"> 
 
    <h3>Plus symbol using font</h3> 
 
    <span class="plus-symbol">+</span> 
 

 
    <br/> 
 
    <br/> 
 

 
    <label>Font-size : 400%</label> 
 
    <div class="icon-placeholder"> 
 
    <span class="icon"></span> 
 
    </div> 
 
    <label>Font-size : 300%</label> 
 
    <div class="icon-placeholder"> 
 
    <span class="icon" style="font-size: 300%;"></span> 
 
    </div> 
 
    <label>Font-size : 200%</label> 
 
    <div class="icon-placeholder"> 
 
    <span class="icon" style="font-size: 200%;"></span> 
 
    </div> 
 
    <label>Font-size : 100%</label> 
 
    <div class="icon-placeholder"> 
 
    <span class="icon" style="font-size: 100%;"></span> 
 
    </div> 
 
</div> 
 
<div class="left"> 
 
    <h3>Plus symbol using pseudo element</h3> 
 
    <div class="icon-placeholder"> 
 
    <span class="custom-plus-icon"></span> 
 
    </div> 
 
</div>