如何使HTML代码中的ARTIST文本居中？position:fixed方案无效

首先得先帮你修复一下原始HTML里的标签错误——你的代码里有未闭合的<b>标签，还有<div>和<p>的嵌套混乱（比如第一个div里的p没闭合就结束div了，第二个p外面的div也没对应开始标签），这些结构错误可能会导致样式失效，先把结构理顺，再处理居中。

修复结构并实现居中的简单方案 #

你尝试的position:fixed; left:50%没生效，大概率是因为没配合transform: translateX(-50%)，而且这种方法更适合特殊定位的元素，对于普通文本来说，用text-align: center是更直接省心的方案。

下面是修正后的完整代码：

<div class="content">
  <p style="font-size:18px; line-height:10px; color:black;">
    <b>SONGNAME</b>
  </p>
  <p style="font-size:18px; color:#FF2C55; line-height:0; text-align:center;">
    ARTIST
  </p>
</div>

额外说明：如果你坚持想用定位方法 #

要是你还是想尝试position的实现方式，也可以这么写（不过对于普通文本段落来说，这个方法有点冗余）：

<div class="content">
  <p style="font-size:18px; line-height:10px; color:black;">
    <b>SONGNAME</b>
  </p>
  <p style="font-size:18px; color:#FF2C55; line-height:0; position:relative; left:50%; transform: translateX(-50%);">
    ARTIST
  </p>
</div>

这里要把position设为relative（如果用absolute的话，需要父元素设置position:relative作为定位参考），然后通过transform: translateX(-50%)让元素自身向左偏移一半宽度，这样才能实现真正的居中——只写left:50%的话，元素的左边缘会对齐容器的50%位置，视觉上并没有居中。

内容的提问来源于stack exchange，提问作者Rokas Šimas