如何使用 clear: both 制作的多行 div 垂直和水平居中其他 div 中的多个 div？

Question

我有这个HTML:

<div id="content">
  <div id="letter1">T</div>
  <div id="letter2">H</div>
  <div id="letter3">A</div>
  <div id="letter4">T</div>
  <div id="letter5" style="clear: both;">W</div>
  <div id="letter6">O</div>
  <div id="letter7">R</div>
  <div id="letter8">K</div>
  <div id="letter9">S</div>
</div>

如您所见，我有一个字符串 divided on characters，每个字符在另一个 div 中。我想让每个单词都在单独的行中，每个单词都水平居中。考虑 clear: both; 开始新行。垂直对齐会很好，但不是必需的。字数（行数）和字母数视情况而定。

我找到的所有关于居中的指南都讲述了如何将多个 div 居中，但是它们在一行中或者在自由分隔线之后居中（下一个 [= 没有 space 20=] 排成一行，因此它需要下一行剩余的 divs 并将该行居中）。

Answer 1

为什么不将每组字母（单词）包装在自己的 div 中？不确定您真正想要实现的目标，请给我们更多信息。

编辑。为清楚起见，在后面添加了代码示例。

<div>
    <span>w</span>
    <span>o</span>
    <span>r</span>
    <span>d</span>
</div>
<div>
    <span>p</span>
    <span>l</span>
    <span>a</span>
    <span>y</span>
</div>

如何使用 clear: both 制作的多行 div 垂直和水平居中其他 div 中的多个 div？

How to center multiple divs in other div vertically and horizontally with multiple lines of divs made by clear: both?

html

css

centering