在 contenteditable 中使用 Flexbox 居中时的插入符位置

在 OSX Chrome 45 上测试，align-items: center;适用于内容，但如果您单击下面的空可编辑区域，则插入符号位置不会居中，直到您开始键入。

是通过顶部/底部平衡填充来解决此问题的唯一方法，还是有一种方法可以使其在不发生像素移位的情况下工作？谢谢

[contenteditable="true"] {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    min-height: 46px;
}

[contenteditable="true"]:focus {
    outline: none;
}

<div contenteditable="true"></div>
<div contenteditable="true">content is centered, but caret isn't</div>

正如 James Donnelly 在评论中所说，您可以尝试在规则中添加行高，例如：

[contenteditable="true"] {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    min-height: 46px;
    line-height: 46px;
}

不过我实际上可能会选择padding反而。添加min-height给你的contenteditable元素是导致光标和输入值之间出现问题的原因。拿走min-height，问题就解决了。那么你的问题就变成了“我如何在这个周围添加均匀的空间”contenteditable元素？” - 这正是填充的用途:)

所以也许更像是：

[contenteditable="true"] {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 15px 0;
}

取决于您到底想要实现什么，以及您是否真的需要修复 div 的高度。