当父级有 display: 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 不支持 align 属性。