Question

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

父div必须将其显示设置为block ，因为我需要它的顶部和底部边框才能拥有它的最大高度＆＃39;容器，因为它将被选择用于调整大小事件。

我尝试过很多方法，比如flexbox和vertical align，但它们都要求我改变父的显示属性，这是我无法看到的。我甚至会接受一个JS解决方案，如果它有效，并且不会太麻烦。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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属性。

当父有display：block;时，将父<div>中的子<div>垂直居中。

1 个答案: