用 css 初始化 contenteditable div cursor 的垂直 alignment

Question

我有以下內容：

 #container { background-color: #ddd; width:150px; height: 150px; display: grid; vertical-align: middle; text-align: center; align-items: center; } #container:focus { align-items: center; vertical-align: middle; text-align: center; }

 <div id='container' contenteditable="true"> </div>

我想讓 cursor 在 div 容器的中心初始化。 目前，它從頂部（Chrome）或底部（Firefox）開始。 我一開始打字，它就集中了。

如何使用 css 初始化 contenteditable div cursor 的垂直 alignment？

Answer 1

使用display:table-cell; ，它應該比grid更好（似乎只適用於 Chrome）

 #container { background-color: #ddd; width: 150px; height: 150px; text-align:center; display:table-cell; vertical-align:middle; }

 <div id='container' contenteditable="true"> </div>

使其與 Firefox 一起使用的hacky想法，您需要 div 為空：

 #container { background-color: #ddd; width: 150px; height: 150px; text-align:center; display:table-cell; vertical-align:middle; } #container:empty { line-height:150px; padding-left:75px; box-sizing:border-box; text-align:left; }

 <div id='container' contenteditable="true"></div>

Answer 2

這個解決方案很短。

 *:focus { outline: none; }.div{ display: flex; justify-content: center; align-items: center; text-align: center; width: 300px; height: 300px; background: orange; }.div:empty{ line-height:300px; }

 <div class="div" placeholder="Type something" contenteditable></div>