div块内的CSS中心文本（水平和垂直）

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个div设置为display:block（90pxheight和width），我有一些文字里。

我需要文本在垂直和水平方向的中心对齐。

我已经尝试过了text-align:center，但是它没有做水平部分，所以我尝试了vertical-align:middle，但是没有用。

有任何想法吗？

回答：

如果是一行文本和/或图像，则很容易做到。只需使用：

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

而已。如果可以是多行，那么它会稍微复杂一些。但是在http://pmob.co.uk/上有解决方案

。查找“垂直对齐”。

由于它们往往是黑客或添加复杂的div …我通常使用带有单个单元格的表来实现它…使其尽可能简单。

2020年更新：

除非需要使它在早期的浏览器（例如InternetExplorer10）上运行，否则可以使用flexbox。当前所有主流浏览器都广泛支持它。基本上，需要将容器指定为弹性容器，并沿其主轴和横轴居中：

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

指定一个固定的宽度，这称为“弹性项目”：

#content {
  flex: 0 0 120px;
}

要收缩包装内容，它甚至更简单：只需flex: ...从flex项中删除该行，它就会自动收缩包装。

上面的示例已经在包括MS Edge和Internet Explorer 11在内的主要浏览器上进行了测试。

如果需要自定义一个技术说明：在flex项内部，因为该flex项本身不是flex容器，所以旧的非flexboxCSS方式可以按预期工作。但是，如果向当前的伸缩容器中添加其他伸缩项目，则两个伸缩项目将被水平放置。要使其垂直放置，请flex-direction:column;在弹性容器中添加。这是它在flex容器及其 子元素之间工作的方式。

还有另一种进行居中的方法：通过不指定centerflex容器在主轴和交叉轴上的分布，而是margin:

auto在flex项上指定以占据所有四个方向上的所有额外空间以及均匀分布的边距将使flex项在所有方向上居中。除存在多个弹性项目外，此方法均有效。此外，此技术在MSEdge上有效，但在Internet Explorer 11上无效。

2016年/ 2017年更新：

通常可以使用来完成此操作transform，即使在较旧的浏览器（例如Internet Explorer 10和Internet Explorer

11）中也可以很好地工作。它可以支持多行文本：

position: relative;
top: 50%;
transform: translateY(-50%);

回答：

上面的解决方案为内容区域使用了固定的宽度。要使用收缩包装的宽度，请使用

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

如果需要对Internet Explorer10的支持，则flexbox将不起作用，并且上述方法和line-height方法将起作用。否则，flexbox会完成这项工作。

以上是 div块内的CSS中心文本（水平和垂直） 的全部内容， 来源链接： utcz.com/qa/424025.html

回到顶部