如何在body标签中垂直水平居中文本？

Question

4

如何将文本垂直和水平居中到页面中央？

例如，如果我有这个文本，“输入代码”。

此外，额外的相关问题是，它是文本还是图像是否重要？我问这个问题是因为我可能会在文本左侧放置一个图像。

- 1.21 gigawatts

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Borealid · Answer 1

0

我不太确定你所说的“center”是什么意思（有几个定义），但也许这样做可以满足你的需求：

<div class="myclass">Some text</div>

.myclass {
    position: absolute;
    left: 50%;
    top: 50%;
}

无论是文本还是图像，浏览器都将其视为块级内容。

请注意，text-align: center;会使项目在其容器内水平居中。

- Borealid

4

就可信度而言，这将不会“居中”图像，它将左上角对齐到页面中心点，而不是图像中心，这可能不是想要的效果。 - FilmJ

4

为了将元素居中，结合使用以下代码：transform: translateX(-50%) translateY(-50%);（如有需要，请添加前缀）。 - Zach Saucier

除了“位于中间的地方”之外，中心还有哪些定义？ - DavidB

将此文本的左边缘与屏幕左右边缘之间的像素中心对齐。将此文本放置在屏幕左半部分的像素数量恰好为其总像素数的一半，右半部分的像素数量也是如此。将此文本放置在屏幕左半部分的字符数量为其总字符数的一半。这三个定义会产生不同的结果。 - Borealid

如果您希望文本真正居中（考虑到文本长度），则应使用以下类：

  .text {
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
  }

- Varun Sharma