contenteditable可编辑盒子光标左对齐问题：如何实现光标居中？

为什么光标初始左对齐？ #

当contenteditable元素为空时，flex布局的justify-content: center仅作用于伪元素::before（即占位文本），但光标属于元素的原生文本流。空元素的文本流没有实际内容，浏览器默认将光标定位在元素的起始边缘（左侧）——flex的居中规则不会影响空文本流的光标位置，只有当元素内有实际文本时，flex才会将文本（及光标）居中。

解决方案 #

方案1：用行高+文本对齐替代Flex（最简单）

去掉flex相关属性，通过line-height实现垂直居中，配合text-align: center直接让空元素的光标居中：

.editable-box {
  background: cyan;
  height: 100px;
  line-height: 100px; /* 与height值一致，实现垂直居中 */
  text-align: center;
}

.editable-box:empty::before {
  content: "Sample Text";
}

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

这种方式在Firefox 151中可以直接生效，光标初始就处于中心位置。

方案2：保留Flex布局，添加零宽空格

如果必须保留flex布局，可以在元素中插入一个零宽空格（​），让元素始终存在一个不可见的文本节点，这样flex的居中规则会作用于该节点，光标随之居中：

<div class="editable-box" contenteditable="true">&#8203;</div>

调整CSS，让占位文本仅在元素无有效内容时显示：

.editable-box {
  background: cyan;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.editable-box::before {
  content: "Sample Text";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 避免占位文本干扰点击 */
}

.editable-box:not(:empty)::before {
  display: none;
}

方案3：用Grid布局替代Flex

Grid的place-items: center对空contenteditable元素的光标位置兼容性更好，Firefox中无需额外处理即可让光标居中：

.editable-box {
  background: cyan;
  height: 100px;
  display: grid;
  place-items: center; /* 同时实现水平+垂直居中 */
  text-align: center;
}

.editable-box:empty::before {
  content: "Sample Text";
}

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

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