How to vertically center a 200px font-size lowercase 'x' in a div?

Question

How to vertically center a 200px font-size lowercase letter ('x' in this example) in a div ?
-- plz don't redirect me to a 'center a div inside a div' solution... it's not the same question at all...
I'v tried a couple of ways, but all solutions centers the height of the line-box... and a lowercase 'x' is not in the middle of a line-box no matter the line-height... So how to center a lowercase 'x' inside a div ?

Things I've tried :
A) notes : I know that this solution actually centers the height of the line-height, but the 'x' isn't at the center of the line-height (yes i know this is normal). So how do I vertically center the lowercase 'x' then ?

B) no notes

C) notes : this puts 150px padding on top of the line-height (witch is at value 0) and 150px padding at bottom fo line-height.. the problem is that the line-height is positioned a little bit higher that the center of the lowercase 'x', and I know this is all normal. But still i don't know how to center a lowercase 'x' inside a div..

I've also tried messing around with vertical-align but I don't think this is how to resolve this problem... or is it?

/* A) */
#x_container {
  font-size: 200px;
  border: solid black 1px;
  line-height: 300px;
  height: 300px;
}

/* B) */
#x_container_2 {
  font-size: 200px;
  border: solid black 1px;
  height: 300px;
}

#x_container_2 span {
  position: relative;
  display: inline-block;
  background-color: aliceblue;
  top:50%;
  transform: translateY(-50%);
}

/* C) */
#x_container_3 {
  font-size: 200px;
  border: solid black 1px;
  height: 300px;
}

#x_container_3 span {
  display: inline-block;
  background-color: aliceblue;
  line-height: 0;
  padding: 150px 0; 
}

<!-- A) -->

<div id="x_container">x</div>

<!-- i also have tried this:  -->
<!-- B) -->
<br>
<div id="x_container_2">
  <span>x</span>
</div>

<!-- i also have tried this:  -->
<!-- C) -->
<br>
<div id="x_container_3">
  <span>x</span>
</div>

Answer 1

#x_container {
    font-size: 200px;
    border: solid black 1px;
    /* line-height: 300px; */
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
 span {
 width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    align-content: center;
    flex-wrap: nowrap;
    margin-top: 10px;
 }

<div id="x_container"><span>x</span></div