Div Not Center Using class="center-block" in Bootstrap

Demo Fiddle

You need to add the class text-center to the div with the id panel-body.

Change your HTML to:

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Hanoi Tower</div>
        <div class="panel-body text-center">
            <canvas id="stage" class="center-block" width="400" height="220" style="border:1px black solid "></canvas>
            <div id="ctrl" class="center-block">
                <label for="numsel">Disc Number：</label>
                <select id="numsel">
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                <button class="btn btn-default" id="start" value="start">Start</button>
                <label for="step">Step：</label> <span class="badge" id="step">0</span>  

            </div>
        </div>
    </div>
</div>

Or change your CSS to add:

.panel-body{
  text-align:center;
}

All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.

Add this class in your css

.center-block{
    text-align: center;
}

DEMO

You can either use a fixed with (say 400px) and margin: 0 auto;

.center-block{
    width: 400px;
    margin: 0 auto;
}

DEMO

Or you can just use text-align: center;

.center-block{
    text-align: center;
}

DEMO2