Horizontal Center Dynamic Image in Div with Absolute Position

How can I center an absolutely positioned element in a div?

<body>  <div style="position: absolute; left: 50%;">    <div style="position: relative; left: -50%; border: dotted red 1px;">      I am some centered shrink-to-fit content! <br />      tum te tum    </div>  </div></body>

Centering an image vertically in a div with a dynamic height

You can give the parents divs relative positioning and the images absolute positioning:

img {    width:25px;    position:absolute;    margin:auto;    top:0;    bottom:0;}.container-fluid > div {    text-align:center;    height: calc(100vh/5);    position:relative;}.container-fluid > div:nth-child(odd) {    background:yellow;}

<div class="container-fluid">    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div></div>

How do I horizontally center an absolute positioned element inside a 100% width div?

If you want to align center on left attribute.

The same thing is for top alignment, you could use margin-top: (width/2 of your div), the concept is the same of left attribute.

It's important to set header element to position:relative.

try this:

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

DEMO

If you would like to not use calculations you can do this:

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

DEMO2

Align in middle dynamic image inside slider with absolute position

To vertical align to middle, I like to use:

.elem {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Of course, you need all the vendor prefix (-webkit-transform, -moz-transform).

This is compatible with all majors browsers (IE9 and up)

How do I centre absolutely positioned content of unknown width?

Either use JavaScript to calculate the width and move it,

use a CSS hack to move the element right and left by 50%,

or don't absolutely position it.

This answer is incredibly short, but it is to the point. If you require something to be centralised (meaning you would like the browser to determine where the centre point is, and position it there), then you can't use absolute positioning - because that takes away control from the browser.

To fade the paintings in over each other I need to position them
'absolute' to stop them from stacking.

This is where your problem lies. You have assumed that you need absolute positioning for the wrong reason.

If you are experiencing problems placing elements on top of each other, wrap the images in an absolutely positioned container which is 100% width and has text-align: center

If you do feel that absolute positioning is necessary, the following hack can be used to achieve your desired results:

div {
    position: absolute;
    /* move the element half way across the screen */
    left: 50%;
    /* allow the width to be calculated dynamically */
    width: auto;
    /* then move the element back again using a transform */
    transform: translateX(-50%);
}

Obviously the above hack has a terrible code smell, but it works on some browsers. Be aware: this hack is not necessarily obvious to other developers, or other browsers (especially IE or mobile).

How do you horizontally center an element with position: absolute?

Generally, when an element is position: absolute the parent is position: relative.
Then, the absolute element is left: 50%; transform: translateX(-50%); for horizontal centering. For vertical centering top: 50%; transform: translateY(-50%);

.parent {  position: relative;  height: 200px; // needs height/width cause 'absolute' child takes no space  width: 200px;  border: 1px solid red;}
.child-1 {  position: absolute;  height: 50px;  width: 50px;  border: 1px solid blue;    left: 50%;  transform: translateX(-50%);}
.child-2 {  position: absolute;  height: 50px;  width: 50px;  border: 1px solid orange;    top: 50%;  transform: translateY(-50%);}
.child-3 {  position: absolute;  height: 50px;  width: 50px;  border: 1px solid green;    top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

<div class='parent'>  <div class='child-1'>horizontal</div>  <div class='child-2'>vertical</div>  <div class='child-3'>both</div><div>