如何用纯CSS实现不同尺寸元素的画廊水平居中且不浪费空间？

问题背景 #

• 为所有元素设置text-align:center可使每一行水平居中
• 为所有元素设置float:left可填充每行内的垂直空间，但行不再居中
• 有没有办法同时实现这两种效果？

实现方案 #

通过以下代码可以同时达成两种效果：

CSS 代码

*{
  text-align:center
}
label,input,:checked~*{
  float:left
}
table{
  display:inline-table;
  border:solid transparent;
  border-collapse:collapse
}
td{
  width:1em;
  height:1em;
  line-height:0;
  font-size:xxx-large;
  background-color:silver
}
tr:nth-child(odd)>td:nth-child(even),
tr:nth-child(even)>td:nth-child(odd){
  background-color:gray
}

HTML 代码

<label for=f>float</label><input type=checkbox id=f><table>
  <tr><td>♜<td>♞<td>♝<td>♛<td>♚<td>♝<td>♞<td>♜
  <tr><td>♟<td>♟<td>♟<td>♟<td>♟<td>♟<td>♟<td>♟
  <tr><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td>
  <tr><td><td><td><td><td><td><td><td>
  <tr><td>♙<td>♙<td>♙<td>♙<td>♙<td>♙<td>♙<td>♙
  <tr><td>♖<td>♘<td>♗<td>♕<td>♔<td>♗<td>♘<td>♖
</table><table><tr><td><td><tr><td><td>
</table><table><tr><td><td><tr><td><td>
</table><table><tr><td><td><tr><td><td>
</table><table><tr><td><td><tr><td><td>
</table><table><tr><td><td><tr><td><td>
</table><table><tr><td><td><tr><td><td>
</table><table><tr><td><td><tr><td><td>
</table><table><tr><td><td><tr><td><td></table>

效果说明 #

勾选复选框后，元素会启用float:left填充行内垂直空间，同时由于根元素保留text-align:center，且表格设置为display:inline-table，整体行依然保持水平居中状态，完美兼顾两种需求。

内容的提问来源于stack exchange，提问作者Ryan Hilbert