在多个图层div中居中画布

Question

我目前正在努力解决CSS格式问题。我想我还没有理解像＆＃34; inline-block＆＃34;真的很有意思。

我想在屏幕上居中一个5 x 5格的盒子，但它仍然在左侧。提前谢谢！

http://jsfiddle.net/msauter/5xafg5cs/1/

<div id="trialPanel" class="panel">
<div id="x1">
[...]
</div>
<div id="trial">
  <div class="row relef">
    <div class="box relef" id="testbox"><canvas id="s1"></canvas></div>
        <div class="box relef"><canvas id="s2"></canvas></div>
        <div class="box relef"><canvas id="s3"></canvas></div>
        <div class="box relef"><canvas id="s4"></canvas></div>
        <div class="box relef"><canvas id="s5"></canvas></div>
    </div>
        <div class="row relef">
            <div class="box relef"><canvas id="s6"></canvas></div>
            <div class="box relef"><canvas id="s7"></canvas></div> 
            <div class="box relef"><canvas id="s8"></canvas></div>
            <div class="box relef"><canvas id="s9"></canvas></div>
            <div class="box relef"><canvas id="s10"></canvas></div>
        </div>
        <div class="row relef">
            <div class="box relef"><canvas id="s11"></canvas></div>
            <div class="box relef"><canvas id="s12"></canvas></div>
            <div class="box relef"><canvas id="s13"></canvas></div>
            <div class="box relef"><canvas id="s14"></canvas></div>
            <div class="box relef"><canvas id="s15"></canvas></div>
        </div>
        <div class="row relef">
            <div class="box relef"><canvas id="s16"></canvas></div>
            <div class="box relef"><canvas id="s17"></canvas></div>
            <div class="box relef"><canvas id="s18"></canvas></div>
            <div class="box relef"><canvas id="s19"></canvas></div>
            <div class="box relef"><canvas id="s20"></canvas></div>
        </div>
        <div class="row relef">
            <div class="box relef"><canvas id="s21"></canvas></div>
            <div class="box relef"><canvas id="s22"></canvas></div>
            <div class="box relef"><canvas id="s23"></canvas></div>
            <div class="box relef"><canvas id="s24"></canvas></div>
            <div class="box relef"><canvas id="s25"></canvas></div>
        </div>
            <div class="row relef" id="xx2"></div>
    </div>
</div>

--- CSS ---
.body{
margin-top:14px;
background-color: black;
font-size: 12pt;
}

.consent-form
{
max-height:500px;
overflow: auto;
border: 1px solid grey;
border-radius: 5px;
font-size: 12pt;
}

#trial
{
display: inline-block;
vertical-align: middle;
background-color: black;
background-repeat: no-repeat;
background-position: center center;
font-size: 14pt;
height: 100%;
text-align: center;
margin: 0px 0px 0px 0px;
}

#trialPanel
{
background-color: black;
height: 100%;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}

#block-wait
{
margin:auto;
background-color: black;
font-size: 18pt;
}

.relef {
position: relative;
float: left;
}

.row {
width: 100%;
float: left;
}

.box{
height: 8vh;
width: 8vh;
margin: 3vh;
background-color: yellow;
}

.canvas{
position:absolute;  
}

Answer 1

为了使您的框中心，您可以设置.row类text-align: center;和.block display：inline-block;`。

.row {
    /* ... */
    text-align: center;
}
.box {
    /* ... */
    display: inline-block;
}

演示：http://jsfiddle.net/5xafg5cs/2/

您还需要使画布仅占据父级的最大高度，否则它们将垂直展开行。