title: HTML/CSS : How to write a text vertically, keeping the characters horizontally
body: <p>I'm wondering if we could write a vertically text, but without use a rotation of any hacks that change the characters direction.</p>
  
  <p>So, instead of "<strong>START</strong>", I want a text in may div displayed like this :<br>
  <strong>S</strong><br>
  <strong>T</strong><br>
  <strong>A</strong><br>
  <strong>R</strong><br>
  <strong>T</strong>  </p>
  
  <p>I could use "break-word: word-break" and set the width of my element to 0, but the text would'nt be centered. Characters will just be aligned to the left</p>
  
  <p><strong>Not a duplicate of</strong> : <a href="https://stackoverflow.com/questions/4264527/vertical-text-direction">Vertical Text Direction</a><br>
  I don't want to rotate the text, I want to preserve character's direction</p>
  
  <p>Here is a code example of what I can get :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.vertical-text {
      font-size: 25px;
      word-break: break-word;
      width: 0;
      display: flex;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(0, 0, 0, 0.2);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
   }
   
   body, html {
     margin: 0;
     padding: 0;
     height: 100%;
     width: 100%
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="vertical-text"&gt;START IT&lt;div&gt;</code></pre>
  </div>
  </div>
  </p>