html - div 内的文本垂直和水平对齐

Question

我有一个 <div>和一个 <p>在包含一些文本的 div 中。

使用 text-align:center 可以实现水平对齐属性，但我无法将它垂直居中。

我已经检查了其他相关解决方案，但它们是特定于该特定问题的，不适用于任何 div 大小。

我需要一个可能适用于任何不同尺寸的 div 的解决方案(在我的例子中，宽度和高度都是 100%)。

这是我的 Fiddle

Answer 1

您可以在 p 上使用 top: calc(50% - 1em) 使其垂直居中。

p {
    position: relative;
    top: calc(50% - 1em);
}

Fiddle

---

多行文本解决方案:

思路是获取文本的高度，除以2，在calc(50% - ****) 当页面加载或调整窗口大小时。然后找到p标签的规则，修改top属性。

Fiddle

var p = document.getElementsByTagName('p')[0];

function doMath() {
  var ss = document.styleSheets;
  for (k = 0; k < ss.length; k++) {
    var rules = ss[k];
    for (l = 0; l < rules.cssRules.length; l++) {
      var r = rules.cssRules[l];
      if (r.selectorText == "p") {
        r.style.top = 'calc(50% - ' + String(parseInt(getComputedStyle(p).height.slice(0, -2)) / 2) + 'px)'
      }
    }
  }
}

doMath();
window.onresize = doMath;

html,
body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
#dvTxt {
  background-color: lightblue;
  height: 100%;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}
p {
  position: relative;
  top: calc(50% - 7.5px);
}

<div id="dvTxt">
  <p>This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered
    vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want
    it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is
    my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically</p>
</div>