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

Answer 1

There is a much more lightweight solution.

1. Take 50% of the outer element down from the top
2. margin up 50% of these 50% to the inside element to get on the center of bottomline of the outer element (see fiddle below)

.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>

Answer 2

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)

<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

Check this solution

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

Explanation

Change the CSS property position of the wrapper to relative and of element you want centered to absolute.

Then position the element in the middle of the wrapper using top: 50% and left: 50%.

After this you will notice that the element is not exactly centered, because it's own height and width are off the calculation.

So we fix with the property transform: translate(-50%, -50%), which brings the element half of it's height up, and half it's width left. The result will be a vertically and horizontally centered element.

Since we are taking IE8 into consideration, we will use a filter to achieve the same effect as the transform: translate.

In order to generate the filter attribute, the following resource was used: IE's CSS3 Transforms Translator

Example

.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>

Answer 5

In stead of the solution you should use this one

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