Centering span and letters relative to his parent with all browsers

Question

I'm trying to make an icon using two Japanese characters from the native font.

I made a circle of a div container being a parent of the span containing the two letters.

I want the geometrical center of the span to be superposed the geometrical center of the span (with the span hugging the word width and height).

I've managed to do it with Firefox but it doesn't hold with other browsers (At least it doesn't work with Chrome nor Opera).

html code :

<header id="HEADER">
        <div class="logo">
            <span>鴨川</span>
        </div>
        <h1>Kamogawa Gym<span>The boxing gymnase of the champions</span></h1>
</header>

css code:

.logo {
  background: red;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

.logo span {
  font-size: 75px;
  padding-right: 181.25px;
}

header h1 {
  font-size: 2.625em;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
}

header h1 span {
  font-size: 60%;
  display: block;
}

Here is a code pen : http://codepen.io/LittleNooby/pen/mPzdvz

Answer 1

Try setting the line-height property on your <span> to match the diameter of your circle.

.logo span {
    font-size: $logoDiameter * 3 / 8;
    padding-right: $logoDiameter - ( $logoDiameter * 3 / 8) / 4;
    line-height: $logoDiameter; 
}

Due to the alignment and orientation of your character(s), the line height will actually affect the "width" and setting this properly will allow the element to span the with of the circle and be centered properly.

You can see an updated CodePen here and output demonstrated below :