如何在正文标签中垂直和水平居中文本？ [复制]答案

【问题标题】：How do I center text vertically and horizontally in the body tag? [duplicate]如何在正文标签中垂直和水平居中文本？ [复制]
【发布时间】：2017-04-21 21:32:23
【问题描述】：

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

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

另外，与奖金相关的问题，是文字还是图片有关系吗？我问是因为我可能会将图像放在文本的左侧。

【问题讨论】：

标签： html css

【解决方案1】：

我不确定您所说的“中心”是什么意思（有多种定义），但也许这会满足您的需求：

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

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

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

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

【讨论】：

对于它的价值，这不会“居中”图像，它会将左上角和上角对齐到身体的中心点，而不是图像的中心，这可能是需要。
要使元素居中，请将其与变换配对：transform: translateX(-50%) translateY(-50%);（如果需要，可以使用前缀）
除了“居中”之外，还有哪些关于中心的定义？
“将此文本的左边缘对齐到屏幕左右边缘中间的像素”。 “放置此文本，使其恰好一半的像素位于屏幕的左半边，而其一半的像素位于右侧”。 “放置此文本，使其一半字符位于屏幕的左半边”。这三个定义都会产生不同的结果。
如果你想让文本真正位于中心（考虑到文本的长度），那么类应该是：.text { position: absolute;文本对齐：居中；最高：50%；宽度：100%； }