title: Keeping content centered vertically with only CSS?
body: <p>I have a content area that should behave in the following way: </p>
  
  <ul>
  <li>Content is centered vertically if there's no vertical overflow (currently achieved via <code>display:table/-cell</code>)</li>
  <li>No scrollbar is displayed unless there is vertical overflow</li>
  <li>the height of the containing div never changes</li>
  </ul>
  
  <p>I've only been able to satisfy the first point - <strong>fiddle:</strong> </p>
  
  <p><a href="http://jsfiddle.net/PTSkR/125/" rel="nofollow">http://jsfiddle.net/PTSkR/125/</a></p>
  
  <p><strong>Here's my html:</strong> </p>
  
  <pre><code>&lt;div class="row-fluid card-box"&gt;
  
      &lt;div class="span4 side-study-box"&gt;
          &lt;div class="side-box-content"&gt;
              &lt;pre class="text-content-saved"&gt;TEST 
             TEST&lt;/pre&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Css:</strong> </p>
  
  <pre><code>.side-study-box {
      background-color: white;
      color: black;
      border: 1px solid #3D6AA2;
      text-align: center;
      height: 160px;
      max-height: 160px;
      display: table ;
      margin: 0px ;
      margin-left: -1px;
      position: relative;
      overflow-y: scroll ;
  }
  
      .side-study-box .side-box-content {
          width: calc(100%);
          height: 160px;
          float: right;
          display: table;
          overflow-y: scroll ;
          background-color: white;
      }
  
      /*#region CONTENT AREAS */
  
      /*#region TEXT CONTENT */
      .side-study-box .text-content-saved {
          width: calc(100%+29px);
          font-size: 24px;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          height: 160px !important;
          max-height: 160px ;
          background-color: white;
          padding: 0px ;
          margin: 0px ;
          border: 0px ;
          overflow-y: scroll;
      }
  </code></pre>
  
  <p>Unfortunately I can't use js as part of the solution... is this possible with only css?</p>