title: Center Google Gauge Chart in Chrome
body: <p>I have the following css to center a Google Chart API for a Gauge Chart:</p>
  
  <pre><code>.chart {
      display: block;
      margin: 0 auto;
      width: 100%;
      max-width: 1000px;
      max-height: 400px;
  }
  </code></pre>
  
  <p>In the HTML, I have:</p>
  
  <pre><code>&lt;div class="text-center"&gt;
      &lt;div class="chart" id="gauge"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The chart is displayed via a function call:</p>
  
  <pre><code>function getGaugeChart(value) {
  
  var data = new google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Gauge', value]
  ]);
  
  var options = {
      width: 1200, height: 360,
      redFrom: 0, redTo: 10,
      yellowFrom: 10, yellowTo: 25,
      greenFrom: 90, greenTo: 100,
      minorTicks: 5
  };
  
  var chart = new google.visualization.Gauge(document.getElementById('gauge'));
  
  chart.draw(data, options);
  }
  </code></pre>
  
  <p>I am using Bootstrap 3. The chart displays fine and is centered in IE and Edge, but is left of center in Chrome. How can I fix this so that it is centered across all browsers?</p>