title: how to place my object in the center of my page with css?
body: <p>I can't get to center my div class "bubblewrap" at the very center of my page. Please show me how. The current method I use which usually works does not work now. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: black;
  }
  
  .bubble
  {
      position: relative;
      width: 200px;
      height: 70px;
      padding: 0px;
      background: #FFFFFF;
      -webkit-border-radius: 0px;
      -moz-border-radius:0px;
      border-radius: 0px;
      margin-left:10px;
      margin-top:10px;
  
  }
  
  .bubble:after
  {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 9px 16px 9px 0;
      border-color: transparent white;
      display: block;
      width: 0;
      z-index: 1;
      left: -16px;
      top: 26px;
  }
  
  .oddbubble
  {
      position: relative;
      width: 200px;
      height: 70px;
      padding: 0px;
      background: #FFFFFF;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
      margin-top:10px;
  }
  
  .oddbubble:after
  {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 9px 0 9px 16px;
      border-color: transparent #FFFFFF;
      display: block;
      width: 0;
      z-index: 1;
      right: -16px;
      top: 26px;
  }
  
  .bubblewrap {
      margin:auto;
      position:absolute;
      top:0; bottom:0; left:0; right:0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="bubble.css" type="text/css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="bubblewrap"&gt;
  &lt;div class="bubble"&gt;&lt;/div&gt;
  &lt;div class="oddbubble"&gt;&lt;/div&gt;
  &lt;div class="bubble"&gt;&lt;/div&gt;
  &lt;div class="oddbubble"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I think the problem is to do with my positioning but not sure. </p>