title: How to center-align svg-based Google Charts (since they have position: absolute)
body: <p>Does anybody please have an idea how to center-align the new (i.e. svg-based) Google Charts?</p>
  
  <p>When I inspect the chart elements at <a href="http://preferans.de/OK408547485023" rel="nofollow noreferrer">my web page</a> (please scroll down to the jQuery Tabs with several Google Charts at that page), I see that the chart itself is given an <code>absolute</code> position:</p>
  
  <pre><code>&lt;div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; "&gt;
  &lt;svg width="800" height="500" style="overflow: hidden; "&gt;
  </code></pre>
  
  <p>I'm not sure why Google does it, but it breaks my layout (other than that the charts work well for me):</p>
  
  <p><img src="https://i.stack.imgur.com/VXXQH.png" alt="enter image description here"></p>
  
  <p>My CSS-code:</p>
  
  <pre><code>    h1,h2,h3,p,div,form { 
      text-align: center; 
  }
  </code></pre>
  
  <p>And I've also tried adding there:</p>
  
  <pre><code>    margin-left: auto; 
      margin-right: auto; 
  </code></pre>
  
  <p>My JavaScript-code:</p>
  
  <pre><code>var money_data;
  var money_chart;
  var money_options = {
          width: 800,
          height: 500,
          legend: {position: 'top'},
          areaOpacity: 1.0,
          vAxis: {format: '# $'},
          hAxis: {title: 'Номер недели', titleTextStyle: {color: 'blue'}, slantedText: true, viewWindow: {min: 39, max: 52}},
          colors: ['CCFFCC', '66CC66', 'FF9999'],
          animation: {duration: 1000, easing: 'out'}
  };
  
  function initMoney() {
          $.ajax({
                  url: '/money-json.php',
                  data: { id: 'OK408547485023' },
                  dataType: 'json'
          }).done(function(jsonData) {
                  money_data = new google.visualization.DataTable(jsonData);
                  money_chart = new google.visualization.SteppedAreaChart(document.getElementById('money_chart'));
                  google.visualization.events.addListener(money_chart, 'ready', function() {
                          $('#money_slider').slider('enable');
                  });
                  drawMoney();
          });
  }
  
  function drawMoney() {
          money_chart.draw(money_data, money_options);
  }
  </code></pre>
  
  <p>If no CSS-based solution possible here, could I maybe use JavaScript to move the SVG to the same <code>x</code>-position as the <code>money_slider</code> while enabling the latter (please see the above code)?</p>