Q:

Center Google Gauge Chart in Chrome

I have the following css to center a Google Chart API for a Gauge Chart:
.chart {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    max-height: 400px;
}

In the HTML, I have:
<div class="text-center">
    <div class="chart" id="gauge"></div>
</div>

The chart is displayed via a function call:
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);
}

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?

A:

The only way I could get it to center across all browsers was to have the css class with display: inline-block
.gauge-chart {
    display: inline-block;
    margin: 0 auto;
}

