Center the horizontal and vertical absolute positional element, not knowing the size

Question

I don’t even know if this is possible using only CSS, but I have to ask.

PLEASE read the specifications before providing an answer, respectively. Thanks!

My markup:

<div class="wrapper">
    <img src="http://placehold.it/350x150">
    <p>Some text random size</p>
</div>

Obviously .wrapper will have the height of my img element if it is a block. Then I need the p element to be horizontally and vertically centered inside the wrapper. I do not have a fixed width or height for the p element.

So, regardless of the size of the paragraph or even the size of the image, it should be aligned vertically and horizontally, as shown here http://i.imgur.com/phiR48H.png or here http://i.imgur.com/Xvdt42j .png .

If I set the absolute position in the paragraph, it will not be aligned vertically because I cannot set a negative margin if I do not know the height of the paragraph. I was thinking about a table and a table-cell (vertical-align: middle;), but I only have 1 cell. Any thoughts?

Added fiddle: http://jsfiddle.net/f3x7977z/

It is important that the solution provided is backward compatible, especially in IE8 + .

Any suggestions for additional packers, for the sake of the final result, are welcome!

Answer 1

Explanation

CSS position relative , .

top: 50% left: 50%.

, , .

, transform: translate(-50%, -50%), , . .

IE8, filter , transform: translate.

filter, : IE CSS3 Transforms Translator

.box {
  margin: 10px;
  display: inline-block;
  position: relative;
}
.box span {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 1);
  padding: 5px;
}
.box.translate > span {
  transform: translate(-50%, -50%);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
}

<div class="box translate">
  <img src="http://placehold.it/500x200" />
  <span>centered text</span>
</div>

Hide result

Answer 2

, , IE8. , IE8.

HTML ( )

<div class="wrapper">
    <img src="http://placehold.it/350x150"/>
    <p>My text, size unknowkn</p>
</div>

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/

Answer 3

HTML

<div class="wrapper">
    <img src="http://placehold.it/350x150"/>
    <span></span>
    <p>My text, size unknowkn</p>
</div>

CSS

.wrapper
{
    position: relative;
}

p
{
     position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Answer 4

.

• 50%
• 50% 50% , (. ).

.wrapper {
	position: absolute;
	top: 50%; left: 50%;
}
img { /* or a container with img and p */
	margin-top: -25%; margin-left: -50%;
}

<div class="wrapper">
    <img src="http://placehold.it/350x150">
    <p>Some text random size</p>
</div>

Hide result

Answer 5

.wrapper {
    position: absolute;
    top: 50%; left: 50%;
}
img { 
    margin-top: -25%; margin-left: -25%;
}