如何用CSS将文本居中于固定宽度页面的中心点？

一、让文本居中于页面全宽的中点 #

问题核心是当前标题容器的宽度仅等于可视屏幕宽度，而非页面全宽。只需确保标题容器占满页面全宽，再用text-align: center即可让文本对齐页面中点：

1. 先设置页面根容器（如body）的固定宽度：

body {
  width: 4000px; /* 你的页面固定宽度 */
  margin: 0;
  padding: 0;
}

2. 让标题容器占满页面全宽：

#mainhead {
  background-color: pink;
  font-size: 50px;
  font-weight: 1000;
  color: #e0f2f1;
  text-align: center;
  width: 100%; /* 继承父容器（页面）的宽度 */
}

这样无论页面宽度调整为多少（比如改成5000px），文本都会始终对齐页面全宽的中点。

二、让包含两端对齐文本的容器自身居中 #

要实现「容器内部文本两端对齐 + 容器自身在页面中点居中」，可以通过以下步骤：

1. 给容器设置固定宽度，用text-align: justify实现内部文本两端对齐；
2. 用margin: 0 auto让容器在页面全宽中居中。

示例代码：

.justify-box {
  width: 800px; /* 容器自身宽度，可按需调整 */
  text-align: justify; /* 内部文本两端对齐 */
  margin: 0 auto; /* 容器在页面全宽中居中 */
  background-color: #f5f5f5;
  padding: 15px;
}

对应的HTML结构：

<div class="justify-box">
  这是一段用于测试两端对齐的文本内容，当容器宽度固定时，text-align: justify会让文本的左右两端都对齐容器边缘，同时整个容器会居中在页面的中点位置。
</div>

内容的提问来源于stack exchange，提问作者user17026360