Question

我在div中创建了一个div和另一个div。我希望这些点线 ... 应该在父div的中间（水平和垂直）。请帮我。谢谢。

<div class = "test" style = "width: 32px; height: 22px; display: inline-block; border: 1px solid; border-radius: 5px; text-align: center;">
	<div style = "display: inline-block;">...</div>
</div>

Answer 1

一种可能性（也有很多种）可能是CSS Flexible Box Layout。

您可以使用justify-content属性定义沿主轴的对齐方式和align-items属性，以定义如何沿横轴布置弹性项目。

你.test容器看起来像这样：

.test {
  display: flex;
  justify-content: center;
  align-items: center;
}

您可以查看this JSFiddle上的示例。

Answer 2

你必须在父元素上使用table-cell，在子元素上使用inline-block，并将vertical-align：middle添加到父元素：

<div class = "test" style = "width: 32px; height: 22px; display: table-cell; border: 1px solid; border-radius: 5px; text-align: center; vertical-align: middle;">
    <div style = "display: inline-block;">...</div>
</div>

https://jsfiddle.net/Lkfr6ar1/

如何对齐div中的div中间

2 个答案: