How to center a character that is larger than its container

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.

[How to Center Elements Vertically and Horizontally in Flexbox](http://stackoverflow.com/a/33049198/3597276) — Michael Benjamin, Sep 12 '16 at 13:50

z0mBi3 · Answer 1 · 2016-09-13T06:21:07.570

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>

`margin-top: -12%` was added to center the plus symbol inside the box. The font probably has a whitespace at top which amounts to 12% of the font size. — z0mBi3, Sep 13 '16 at 04:36
This is not a sane solution. This whitespace doesn't always equal to 12%. — Mathieu Marques, Sep 13 '16 at 05:52
It varies from font to font.. If you vary the font-size the plus sign will still be centered without the need to alter the margin-top value. All the fonts maintain the proportion of whitespace for varying font size. You would have to change the `margin-top` value only in case you change the `font-family` — z0mBi3, Sep 13 '16 at 05:55
It may not be always 12%. But if your font remains the same then 12% might help you get it centered. Alternatively you can make use of span to create the plus sign instead of using font which will give you better control over positioning. — z0mBi3, Sep 13 '16 at 06:23

score 0 · Accepted Answer · answered Sep 16 '16 at 13:34

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>

How to center a character that is larger than its container

2 Answers2