How To Center Inside Bootstrap Div

Question

I have a chart and I want the jackpot-item-container div to be visually in the center of the chart but I can't figure out how to do this.

https://codepen.io/bobnooby/pen/gRedep

<div id="jackpot-container" class="col-sm-12">
  <div id="jackpot-item-container">
    <span id="jackpot-item-val">1</span>
    <span id="jackpot-item-max-val">/50</span>
  </div>
  <canvas id="jackpot-chart"></canvas>
</div>

body, html { overflow:hidden; }

#jackpot-container {
    border-style: solid;
    border-width: 1px;
    height: 400px;
    padding: 0;
    margin: 0 auto;
}

#jackpot-item-container {
    border-style: solid;
    border-width: 1px;
    width: 300px;
    text-align: center;
}

I did not include code for chart but it is in codepen.

Answer 1

window.onload = function() {
    var donutEl = document.getElementById("jackpot-chart").getContext("2d");
    var donut = new Chart(donutEl).Doughnut(
        // Datas
        [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            }
        ],
        // Options
        {
            segmentShowStroke : true,
            segmentStrokeColor : "#fff",
            segmentStrokeWidth : 2,
            percentageInnerCutout : 50,
            animationSteps : 100,
            animationEasing : "easeOutBounce",
            animateRotate : true,
            animateScale : false,
            responsive: true,
            maintainAspectRatio: false,
            showScale: true,
            animateScale: true
        });
};

body, html { overflow:hidden; }

#jackpot-container {
    border-style: solid;
    border-width: 1px;
    height: 400px;
    padding: 0;
    margin: 0 auto;
}

#jackpot-item-container {
    border-style: solid;
    border-width: 1px;
    width: 300px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div id="jackpot-container" class="col-sm-12">
  <div id="jackpot-item-container">
    <span id="jackpot-item-val">1</span>
    <span id="jackpot-item-max-val">/50</span>
  </div>
  <canvas id="jackpot-chart"></canvas>
</div>

to have it in the middle of the doughnut apply this css to the item:

#jackpot-item-container {
    border-style: solid;
    border-width: 1px;
    width: 300px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
}

Answer 2

use margin: 0 auto for block elements and it will be centered in its parent.

 <div id="jackpot-container" class="col-sm-12">
  <div id="jackpot-item-container" style="margin:0 auto;">
     <span id="jackpot-item-val">1</span>
     <span id="jackpot-item-max-val">/50</span>
  </div>
  <canvas id="jackpot-chart"></canvas>
 </div>