How to Centre Absolutely Positioned Content of Unknown Width

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

centering with absolute positioning WITHOUT knowing width or height

You can do it with javascript. Dynamically get width and height of .hiddenbox and properly position it using technique you are familiar with. There's one more option to play with, check the example here:

body {
  margin: 0;
}

#fade {
  background: #ccc;
  width: 600px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#content {
  background: #fff;
  border: 1px solid #ff0000;
  padding: 20px;
  display: inline-block;
}

<div id="fade">
  <div id="content">
    Something goes here...
  </div>
</div>

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 with unknown width

Just another approach using "Theodore K." snippet

Demo

.horz-vert-center {  width:50%;  margin: auto;  border: 1px #000 solid;  text-align: center;}.horz-vert-center li{  display: inline-block;  float: none;}
*{margin:0;padding:0;}

<ul class="horz-vert-center">  <li>About</li>  <li>Work</li>  <li>Blog</li>  <li>Journal</li></ul>

Position: absolute, width: unknown. How to center div

Try this CSS for #sliderDots:

#sliderDots {
    position: relative;
    bottom: 40px;
    display: inline-block;
    background-color: whiteSmoke;
    border-radius: 15px;
    box-shadow: 0 0 10px 3px, 0 0 10px 0 #888 inset;
    padding: 10px 10px 10px 20px;
}

Works fine in IE, FF and Chrome (position changed to relative and bottom to 40px)

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>

Pure CSS centering of absolutely positioned image of unknown height

margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

Top property

Setting top/left/bottom/right to 0 would solve your problem possibly.

Found on: Source

How to Centre Absolutely Positioned Content of Unknown Width

How do I centre absolutely positioned content of unknown width?

centering with absolute positioning WITHOUT knowing width or height

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

Centering with unknown width

Position: absolute, width: unknown. How to center div

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

Pure CSS centering of absolutely positioned image of unknown height

Related Topics

Leave a reply