Text inside a div to align both vertically and horizontally

Question

I have a <div> and a <p> inside the div containing some text.

Horizontal alignment is achievable using text-align:center property but I am not able to middle it vertically.

I ve checked other related solutions, but they are specific to that particular problem and not suited for any div size.

I need a solution that could possibly be suited for any div of varying dimensions (in my case it is 100% both width and height).

Here is my Fiddle

Answer 1

You can use top: calc(50% - 1em) on p to center it vertically.

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

Fiddle

---

Solution for Multiline text:

The idea is to get the height of the text, divide it by 2 and use it in calc(50% - ****) when the page loads or the window is resized. Then find the rule for the p tag and modify the top property.

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>