Center horizontally and vertically an absolute positioned element without knowing the size [duplicate]

Answer 1

How to Center Vertically and Horizontally Multiple Absolutely Positioned Child Elements

Other answers posted here already address the IE8 requirement. This answer offers an clean and efficient solution for people who don't care about IE8.

HTML (no changes)

    
    
My text, size unknowkn

CSS

html, body { height: 100%; } /* necessary when using percentage heights within body
                                on non-absolutely positioned children (such as .wrapper)
                                http://stackoverflow.com/a/31728799/3597276 */ 
.wrapper { 
    height: 100%;
    width: 100%;
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
}

img {
  position: absolute;
  left: 50%; /* positions img relative to container */
  top: 50%;  /* positions img relative to container */
  transform: translate(-50%, -50%); /* positions img relative to its height and width */
}

p {
  position: absolute;
  left: 50%;  /* positions p relative to container */
  top: 50%; /* positions p relative to container */
  transform: translate(-50%, -50%);  /* positions p relative to its height and width */
  margin: 0;
}

DEMO: http://jsfiddle.net/f3x7977z/7/