在 <div></div> 中居中文本可防止移动[重复]

Question

我想在<div></div> 中水平和垂直将<p></p> 居中，该<p></p> 可能包含一行或多行。只有父母的宽度和高度是已知的。注意：我将 div 称为父级，将 p 称为子级。

我在here 和其他网站上看到，为了进行垂直居中，最好的方法是在父元素上使用display: table，在子元素上使用display: table-cell 和vertical-align: middle。

但是，我需要 div 的 style.top 和 style.left 稍后被一些 javascript 覆盖，以使其移动。通过使用表格技巧，它以某种方式阻止了我移动父级，至少以这种方式。请注意，当 div 移动时，孩子必须保持居中。

TL;DR:

如何让一个div中的文字居中，然后还能移动这个div？

我的 html 正文：

<div id="target">
    <p>Centered?</p>
</div>

我的 CSS

    div {
        outline: 1px solid white;
        background-color: #FF9F00;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 200px;
        
        /* how to center its child? */
    }
    p {  
        font-family: Arial;
    }

我的 javascript 移动方式：

var target = document.getElementById("target");
target.addEventListener('mousemove', function (event) {
    target.style.left = event.x + "px";
    target.style.top = event.y + "px";
});

Answer 1

使用弹性盒子怎么样？

div {
  display:flex;
  flex-direction:column;
  justify-content: center;
  text-align:center;
}

<div><p>I want this paragraph to be at the center, but it's not.</p></div>

Answer 2

如果父 <div> 是 display: table-cell，则有效：

div {
  width: 300px;
  height: 150px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

p {
  border: 1px solid green;;
  display: inline-block;
}

<div>
  <p>lorem ipsum bla bla blah</p>
</div>