如何保持中间字母居中？ [复制]

Question

我有以下 HTML 结构（不能更改）：

<div className='spritz'>
     <div className='left'></div>
     <div className='middle'></div>
     <div className='right'></div>
</div>

中间有一个字母，其中包含随机单词的中间字母，左右有其余字母。

我如何设置样式，无论我生成什么类型​​的单词，中间字母都会出现在屏幕中间？

例如：

  Hello // (Right = He, Middle= l, Left = lo
   How  // (Right = H, Middle= o, Left = w
Wonderful // (Right = Wond, Middle= e, Left = rful
Different
   Hi

谢谢！！

Answer 1

CSS-Grid 可以做到这一点。

.spritz {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

body {
  position: relative;
}

body::after {
  content: "";
  width: 1px;
  height: 100vh;
  position: absolute;
  background: red;
  left: 50%;
  top: 0;
}

.left {
  text-align: right;
}

<div class='spritz'>
  <div class='left'>Spider</div>
  <div class='middle'>-</div>
  <div class='right'>Man</div>
</div>

<div class='spritz'>
  <div class='left'>Wonder</div>
  <div class='middle'>W</div>
  <div class='right'>oman</div>
</div>