css - 将绝对定位的基于变量的标题居中

Question

好吧，我有一个页面，它的标题总是根据登录的人而改变(他们的名字就是页面的标题)。然而，由于名称总是会有所不同，这意味着它需要通过文本的中心定位，以便它会向两侧水平扩展。我不确定如何处理这个问题，我尝试了一些方法，但是由于标题的长度可变，所有建议都没有成功。因此，为了让您了解我在代码方面的基础知识:

#profteamName{
position:absolute;
text-align:center;
top:220px;
left: 550px;
color: white;
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue;
text-decoration:underline;

我不会反对使用相对定位。只要它会水平扩展即可。

(更喜欢在那里使用绝对定位长篇故事，但我会尽我所能)

谢谢你们的时间。

Answer 1

与其将 div 从页面左侧定位，不如使用 width:100%; 将其拉伸(stretch)到整个窗口(或页面上的容器 div)。它将占据整个宽度并将文本(无论长度如何)对齐到 div 的中间。

CSS

.header {
  position:absolute;
  text-align:center;
  top:50px;
  width:100%;  /* take the width of the window or container div */
  /* rest of your code */
}

这是一个 CodePen mockup 你可以玩。