我正在做的一个项目，涉及可编辑框中的文本字段。框中有占位文本，直到用户点击进入框后，占位文本才会消失，用户就可以输入文本。我已经尽量删减到只保留最小必要的部分来展示问题。我整理出了如下的HTML文档：

.editable-box {
  background: cyan;
  height: 100px;

  /* Center alignment properties */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* CSS Placeholder using data attribute */
.editable-box:empty::before {
  content: "Sample Text";
}

<div class="editable-box" contenteditable="true"></div>

我观察到的现象是，单击框时会出现一个正常的闪烁文本输入光标，但光标却出现在框的最左边缘。一旦我输入一个字符，字符就会移动到框的正中，文本光标跳到该字符之后。下面是一张截图，在点击框后尚未输入前，请注意左边缘的黑色竖线（我的闪烁光标）：

我期望的行为是，当我点击框时，光标应位于框的正中心（文本将要出现的位置）。

为什么我的光标会左对齐而不是居中？是否可以通过修改CSS使光标居中对齐，或是有其他实现这个框的方法？

我的浏览器是Linux Mint 22上的Firefox 151。

解决方案

这是一个 Bug 1625298 Opened 6 years »caret positioned on the left when focus is set on a contenteditable node with text-align set to center«，遗憾的是，没有优雅的变通办法。

因此，要在Firefox中让初始光标位置居中，唯一的方法是在焦点进入之前确保存在一些真实的内容（而非伪内容），请参见测试：

mark {
 display: block;
 padding: 1lh 2ch;
 text-align: center;
 &:empty:not(:focus)::before {
  content: '"Placeholder"';
 }
}

Truly empty:
<mark contenteditable></mark>
Some text content (space + white-space:pre):
<mark contenteditable style="white-space:pre;"> </mark>
Initial BR:
<mark contenteditable><br></mark>

因此，如果你确实需要正确的光标放置，就需要进行类似ufraan在这里建议的那样对内容进行一些摆弄。

或者可以考虑把 把 <br> 放在那里，因为它也是当用户清空 contenteditable 元素中的所有内容时真正的“默认”内容。当然，这会破坏伪占位符的 :empty 的斜线效果，但也许值得尝试？

温馨提示：通常更建议直接使用真实的 label 元素，而不是为了这个目的滥用 placeholder 属性（真实的或模拟的）。