HTML/CSS: How to make a text inside a div centered automatically - html

Question

This might be a dumb question, but I am having a hard time figuring this out. I have some dynamic content that can vary in height. Below this, I have a row of static images but with dynamic texts attached to the image. I want to attach the text to the div in the center, and whenever the dynamic content ABOVE changes, it will push down this div accordingly, with the text fixed in the center. I also want a text fixed onto the right side. Right now, I have manually set the text in the center but this obviously does not work because whenever the screen or content changes, the image is pushed down, but not the text.
https://jsfiddle.net/t1z4tn47/2/
#text {
position: absolute;
right: 540px;
top: 100px;
}
#number {
position: absolute;
right: 470px;
}
#wrapper {
display: inline-block;
}
<div id="somecontent">
some dynamic content here, height will vary and always push the wrapper div below
</div>
<div id="wrapper">
<img src="https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png" alt="">
<span id="text">HELLO</span>
<span id="number">#1</span>
</div>
<img src="http://www.callrail.com/wp-content/upload/2016/05/Yellow-200x200.jpg" alt="">

Answer 1

You may use translate transform after set the position of text
http://www.w3schools.com/css/css3_2dtransforms.asp
#wrapper{
position: relative;
}
#text{
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#number{
position: absolute;
top: 0;
right: 0;
}
#wrapper{
display:inline-block;
}

Answer 2

edit to match comments below
See fiddle https://jsfiddle.net/t1z4tn47/8/
I added position: relative; to the wrapper, this will let you change the absolute positioning of the child elements RELATIVE to the wrapper. Thus, if you add text on top and the boxes move down, the number and text will move with it.
#text{
position:absolute;
right: 50%;
top: 50%;
margin-top: -8px;
margin-right: -26px;
}
#number{
position: absolute;
right: 0;
top: 0;
}
#wrapper{
display:inline-block;
position: relative;
}