我的笔：http ://codepen.io/anon/pen/gtHpC
我用这支笔的目标是让文字垂直和水平居中的堆叠 div。
当您查看灰色或红色/蓝色“堆栈”时，您会看到我达到了这个目标。但现在怪癖来了。
当您在高度上调整窗口大小时，灰色和红色/蓝色堆栈的高度会缩小，然后有时灰色和红色/蓝色堆栈之间会出现黑色（因为主体的背景是黑色）间隙。此间隙仅根据您调整大小的点可见。
看看这张图片：
红色/蓝色堆栈周围的 div 的高度为 24.50%，我将其作为内部 7 个区域的 100%，因此该 div 内的 7 个“区域”中的每一个的高度为14.20%
我已经尝试过使用 100% / 7 = 14.28571428571429 % 而不是 14.20 % 的值，但这使得情况并没有好转。
黑色的缝隙还在。
我使用box-sizing:border-box;所有 html 元素，因此可用的 24.50% 除以 7 个区域会导致每个区域（包括边框或填充）的干净数量为 3.50%，因为我使用最新的 chrome。
所以我不明白为什么调整大小时会出现黑色间隙？
HTML
<div id="responseChart" style="height:100%;">
<div style="font-size:8px;;height:24.50%;">
<ul class="Stack" style="height:100%;width:150px;float:left;">
<li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">1</div></li>
<li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">2</div></li>
<li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">3</div></li>
<li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">4</div></li>
<li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">5</div></li>
<li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">6</div></li>
<li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">7</div></li>
</ul>
<div class="dummy"></div>
<div style="height:100%;width:100px;float:left;">
<div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
</div>
<div class="dummy"></div>
<div style="height:100%;width:75px;float:left;">
<div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
<div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
</div>
<div class="dummy"></div>
</div>
<div style="background:darkred;height:1%;"></div>
<div style="height:74.50%;">
<div style="height:100%;" id="chartBody">
<ul class="Stack" style="width:150px;">
<li><div class="vertical-center horizontal-center" style="height:25%;">test1</div></li>
<li><div class="vertical-center horizontal-center" style="height:50%;">test2</div></li>
<li><div class="vertical-center horizontal-center" style="height:25%;">test3</div></li>
</ul>
<div class="dummy"></div>
<div style="height:100%;width:100px;">
<div style="height:100%;" >
<div class="push-center diagram" style="background-color:#aa11cc;height:25%;">1</div>
<div class="push-center diagram" style="background-color:#aa44cc;height:50%;">2</div>
<div class="push-center diagram" style="background-color:#aa66cc;height:25%;">3</div>
</div>
</div>
<div class="dummy"></div>
<div style="height:100%;width:75px;">
<div style="height:100%;">
<div class="push-center missingReplies" style="background-color:#fff;height:22%;">-1</div>
<div class="push-center diagram" style="background-color:#ff99cc;height:11%;">3</div>
<div class="push-center diagram" style="background-color:#ff33cc;height:44%;">44</div>
<div class="push-center diagram" style="background-color:#ff66cc;height:23%;">36</div>
</div>
</div>
<div class="dummy"></div>
</div>
</div>
</div>
CSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body, html{
width:100%;
height:100%;
padding:5px;
color:white;
background:black;
}
*{ /* Every element which has a border or padding value puts this value inside the div */
box-sizing:border-box;
-moz-box-sizing:border-box;
padding:0;
margin:0;
}
#chartBody{
height:100%;
background:darkgray;
}
.missingReplies{
border-top: gray dashed 1px;
border-left: gray dashed 1px;
border-right: gray dashed 1px;
}
.clear{
clear:both;
}
.diagram
{
color:white;
font-weight:bold;
border-bottom:white solid 1px;
}
#chartBody > div {
height:100%;
float:left;
}
.dummy{
float:left;
background:grey;
height:100%;
width:30px;
}
.Stack {
display: table;
height: 100%;
float: left;
}
.Stack li {
list-style: none;
display: table-row;
}
.Stack li div {
display: table-cell;
}
.horizontal-center {
text-align: center;
}
.vertical-center {
vertical-align: middle;
}