html css3 how to center multiple divs in other div vertically and horizonally with multiple lines of divs made by clear: both : I have such a 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>

As you can see I have a string divided on chars, each char in another div. **I want to have each word in separate line, each centered horizontally. Take under consideration `clear: both;` to start new line.** Vertical alignment woudl be nice but is not necessity. Number of words (lines) and letters vary depeneding on situation.
All the guides i have found about centering tell about centering multiple divs but they are in one line or are centered after free break line (there is no space for next div in line so it takes next line with remaining divs and center the line). Can anybody help me?