Centering dynamic text in absolutely positioned div with dynamic width outside DOM flow

Question

I have two paragraphs that need to be positioned so that they meet these criteria:

• Both paragraphs must be centered in their container at the same height, even if one or both of them take up more than one line. This effectively overlaps the paragraphs.
• The paragraphs container must be centered on the page and have a maximum width less than 100% of the page width.
• These criteria must remain true if either the page is resized or the content of the paragraphs change.

I know that's a lot to keep track of, so I made a JSFiddle to explain and demonstrate what is needed.

Interestingly enough, that JSFiddle seems to be centered properly, but only if the text takes up more than one line...

StackOverflow won't let me post the question without code so here's some code:

<div id="container">
  <p id="p1"></p>
  <p id="p2"></p>
</div>

Note: The reason I said "outside DOM flow" in the title is because at least the second paragraph needs to be outside the DOM flow otherwise it can't be positioned on top of the first paragraph.

Answer 1

I was able to accomplish this by wrapping the paragraphs in a non-statically positioned container.

Then absolutely position the paragraphs and set their width to 100% that of the container. Now using text-align: center; will center the text in the container and you can place the container anywhere on the page, and scale it to any size. The paragraphs will resize to fit the container, they will stay centered and they will stay at the same height.

HTML

<div id="container">
  <div id="p1"></div>
  <div id="p2"></div>
</div>

CSS

#container {
  position: relative;
  width: 70%;
  left: 15%;
}

#container div {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 1em;
  border: solid;
}

JSFiddle

Answer 2

Try this:

function randomNumber(low, high) {return Math.floor(Math.random() * high) + low;}

function generateSentence(length) {
	var sentence = "";
  var count = 0;
  var wordLength = randomNumber(1, 10);
  for (i = 0;i < length;i++){
    if (count == wordLength) {
    	sentence += " ";
      wordLength = randomNumber(1, 10);
      count = 0;
    } else {
    	sentence += "a";
    	count++;
    }
  }
  return sentence
}

var tracker = 1;
setInterval(function(){
	var randomLength = randomNumber(10, 150);
  if (tracker == 1){
  	document.getElementById('p1').innerHTML = generateSentence(randomLength);
    tracker = 2;
  } else {
  	document.getElementById('p2').innerHTML = generateSentence(randomLength);
    tracker = 1;
  }
}, 1000)

#container{
  position: absolute;
  width: 50%;
  left: 25%;
  min-height: 100px;
  background-color: red;
  text-align: center;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
}
#container p {
  margin:0px;
}

<p>The text in both paragraphs below need to stay centered, even when the text changes. The bottom paragraph should be at the same height as the first one, effectively overlapping them.</p>

<div id="container">
  <p id="p1"></p>
  <p id="p2"></p>
</div>

Answer 3

You can do this by css flex property like this

#container {
  display: flex; /* equal height of the children */
}

#container > p {
  flex: 1; /* additionally, equal width */
  text-align:center;
  padding: 1em;
  border: solid;
  background-color:#ff0000
}

<div id="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam</p>
</div>