title: How do I center text vertically with CSS?
body: <p>I've tried to find how to center text vertically, but I can't find a satisfactory answer. The best answer I found until now is <a href="http://www.wpdfd.com/editorial/thebox/deadcentre3.html" rel="nofollow noreferrer">this</a>. This makes it look like it allows me to center text vertically, but if I use this and I add more text, it is only extended to the bottom and not being re-centered, like what happens horizontally.</p>
  
  <p>Note, I'm looking for a CSS-only solution, so no JavaScript please. Note, I want to be able to add multiple lines of text.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              div#maindiv {
                  width: 810px;
                  height: 99px;
                  background-color: black;
                  margin: 0px;
                  padding: 0px;
                  color: white;
                  font-family: Sans-serif;
                  text-align: center;
                  display: table;
              }
              div#maindiv span {
                  font-size: 1.1em;
              }
  
              div#part1 {
                  width: 270px;
                  height: 99px;
                  background-color: #6DCAF2;
                  float: left;
                  vertical-align: middle;
                  position: relative;
              }
  
              div#horizon1 {
                  background-color: green;
                  height: 1px;
                  left: 0;
                  overflow: visible;
                  position: absolute;
                  text-align: center;
                  top: 50%;
                  visibility: visible;
                  width: 100%;
              }
  
              div#content1 {
                  background-color: green;
                  height: 99px;
                  width: 270px;
                  position: absolute;
                  top: -50px;
              }
  
          &lt;/style&gt;
          &lt;title&gt;XHTML-Strict&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;div id="maindiv"&gt;
          &lt;body&gt;
              &lt;div id="part1"&gt;
                  &lt;div id="horizon1"&gt;
                      &lt;div id="content1"&gt;
                          &lt;div id="bodytext1"&gt;
                              &lt;span&gt;
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor augue, faucibus quis sagittis
                              &lt;span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the end, I want to have three blocks, each of them centering the text in the middle. These texts are edited by clients so they have to be able to span over multiple lines. Currently the text starts at the top of the box and goes to the bottom, in the end, I want the text to start at a point so the centre of the body of the text is positioned at the center of the box.</p>
  
  <p>My final solution,</p>
  
  <p>Note: vertical-align does not work if you have <code>float:left</code> in the same div.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              div#maindiv {
                  width: 810px;
                  height: 99px;
                  background-color: black;
                  margin: 0px;
                  padding: 0px;
                  color: white;
                  font-family: Sans-serif;
              }
              div#maindiv span {
                  font-size: 1.1em;
              }
  
              div.part {
                  width: 262px;
                  height: 99px;
                  padding: 0px;
                  margin: 0px;
                  padding: 4px;
                  border: 0px;
                  color: white;
                  text-align: center;
                  display: table-cell;
                  vertical-align: middle;
              }
  
              div.bgc1 {
                  background-color: #6DCAF2;
              }
  
              div.bgc2 {
                  background-color: #2A4B9A;
              }
  
              div.bgc3 {
                  background-color: #FF8A00;
              }
  
  
          &lt;/style&gt;
          &lt;title&gt;XHTML-Strict&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;div id="maindiv"&gt;
          &lt;body&gt;
              &lt;div style="float: left;"&gt;
                  &lt;div class="part bgc1"&gt;
                      &lt;span&gt;
                          Vegeta! What does the scouter say about his power level?!
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="float:left;"&gt;
                  &lt;div class="part bgc2"&gt;
                      &lt;span&gt;
                          It's over NINE THOUSAAAAAAAAAND!
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="float:left;"&gt;
                  &lt;div class="part bgc3"&gt;
                      &lt;span&gt;
                          What NINE THOUSAND? There is no way that can be right!
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>