Css在div内部的垂直对齐范围

Question

因此，我尝试在父div中垂直对齐和水平对齐文本框跨度，问题是它可以很好地对齐或对齐，而不是两者都对齐。如果它是单行文本，它可以工作，但如果它是一个很长的段落，需要多行的父div，它不会垂直对齐。

.objprevicnt {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
width:inherit;
height:50px;
transform: translate(-50%, -50%);
}

此外，我还动态地更改文本

document.getElementById("myid").innerHTML = 'some text';

因此，它应该适当地重新居中。

你可能会认为这是一件简单的事情，一个框在另一个框中的垂直和水平居中，应该与框中的文本大小无关。

Answer 1

我认为这些CSS属性会起作用。请试试这个。

​

#parent_div{
display:flex;
align-items:center;
direction:column;
}
#child_element{
display:flex;
align-self: center;
}

​

Answer 2

在父元素中居中元素的最简单方法可能是使用flexbox：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  display: block;
}