javascript - 当父级显示 : block; 时，将子级 <div> 在父级 <div> 中垂直居中

Question

我正在尝试将具有 contenteditable 的子 div 垂直居中，以便用户可以在父 div 的中间键入内容，因此文本需要垂直居中。

父 div 必须将它的显示设置为 block 因为我需要它的顶部和底部边框具有它的容器的最大高度，因为它将被选中调整大小事件。

我尝试过很多方法，例如 flexbox 和垂直对齐，但它们都需要我更改父级的显示属性，我看不到任何方法。如果它有效并且不太麻烦，我什至会接受 JS 解决方案。

div {
  border: 1px solid black;
  max-width: 100px;
  outline: none;
}

.parent {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 300px;
  
}

.child {
  display: table-cell;
  height: 100%;
  width: 100%;
  max-width: 80px;
  padding: 10px;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
  white-space: pre-wrap;
  word-wrap: break-word;
}

<div class="parent" align="center">
  
  <div contenteditable=true class="child">
  </div>

</div>
  

Answer 1

一种方法是使用这些 CSS 规则:

.parent {
    display: block;
    width: 100%;
    height: 300px;
    position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

查看完整解决方案: http://codepen.io/shippin/pen/yMKMpR

另请注意，您的 html 中存在一些问题:

• contenteditable="true"上缺少引号
• HTML5 不支持对齐属性。