用css初始化可内容的div光标的垂直对齐方式。

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>

我想让光标初始化在div容器的中心。目前，它在顶部（Chrome）或底部（Firefox）开始。当我开始输入时，它就会集中起来。

我如何用css初始化contenteditable div cursor的垂直对齐方式？

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>

A 劈柴 让它与Firefox一起工作的想法，你需要的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>