How to center a character that is larger than its container - html

Question

I have icons that I want centered both horizontally and vertically.
See codepen and snippet below:
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>
How can I do that regardless of .icon's font size.
I have tried transform, position: absolute, display: table with no luck. I can't use flex.

Answer 1

You can achieve it using transform and absolute positioning
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>

Answer 2

On thing to note though, a + isn't necessarily centered in the first place depending on the font.
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>