Question

我正试图将彩色棋盘内的国际象棋游戏板放在中心位置。无论显示器的宽度是多少，我的目标都是将电路板垂直放置在页面中央。我对是否用pixals制作固定宽度的游戏板或使用百分比感到困惑。我的首字母缩写想法是创建一个包装器，使电路板保持居中，但这并没有真正起作用。所以我在另一个网站上阅读了一些后创建了这个方法。这可以做到最简单的方法是什么？

<div class="box"> <div id="gameboard">

^表格单元格低于此值，但与我的问题无关。

.box {
width: 75%;
position: relative;
margin: 0 auto;
background-color: #3F3F3F;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
}

#gameboard {
width: 562px;
text-align: center;
cursor: pointer;
padding-top: 25px;
padding-bottom: 25px;
margin: 0 auto;
}

道歉，如果我的代码很乱，任何帮助都非常感谢！

Answer 1

#gameboard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

只需将上述规则合并到您的代码中即可。（您可能需要transform的一些供应商前缀规则才能在更多浏览器中使用。）

Answer 2

在大多数情况下，在百分比固定宽度的框内部有一个大的像素固定宽度框是没有意义的，因为如果视口水平缩小，那么外部百分比 - 固定 - 宽度框将缩小到如此小的尺寸，使得内部像素固定宽度框将溢出它。您可以设置overflow-x:hidden，但内框中的文本/内容将向右移动并部分切断，因此看起来不太好。

如果您想要一个固定百分比宽度框内的像素固定宽度框，那么您可以在外框上设置min-width（一个不错的选择）值将是内盒的固定宽度），但是它将无法缩小任何小于此值。

另一种方法是固定宽度百分比的内盒。这是一种非常合理的方法;我不确定是否有一些你没有提到的要求使这个解决方案比像素固定宽度更不可行。

盒子内的中心游戏板

2 个答案: