title: Center a DIV horizontally and vertically
body: <p>Is there a way to <strong>CENTER A DIV vertically and horizontally</strong> but, and that is important, that <strong>the content will not be cut when the window is smaller than the content</strong>  <strong>The div must have a background color and a width and hight.</strong> </p>
  
  <p>I have always centered divs with the absolute positioning and negative margins like in the example provided. But it has the problem that it cuts the content on top. Is there a method to center the div .content without this problem?</p>
  
  <p>I have the example here to play: <a href="http://jsbin.com/iquviq/1/edit" rel="noreferrer">http://jsbin.com/iquviq/1/edit</a></p>
  
  <p>CSS:</p>
  
  <pre><code>body { margin: 0px; }
  
  .background {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: yellow;
  }
  
  /* 
  is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
  */ 
  
  
  .content {
      width: 200px;
      height: 600px;
      background-color: blue;
  
      position:absolute;
      top:50%;
      left:50%;
      margin-left:-100px;/* half width*/
      margin-top:-300px;/* half height*/
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="background"&gt;
      &lt;div class="content"&gt; some text &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My question is not duplicate of "How to center an element horizontally and vertically? " 1- My question was asked before. (just check dates). 2- My question ask very clearly and in black as condition: "the content will not be cut when the window is smaller than the content"</p>