Center Content in a Absolute Positioned 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>

Center content in a absolute positioned div

if you add display:table to your #absolute div you should get what you want:

http://jsfiddle.net/3KTUM/2/

How to center absolute div horizontally using CSS?

You need to set left: 0 and right: 0.

This specifies how far to offset the margin edges from the sides of the window.

Like 'top', but specifies how far a box's right margin edge is offset to the [left/right] of the [right/left] edge of the box's containing block.

Source:
http://www.w3.org/TR/CSS2/visuren.html#position-props

Note: The element must have a width smaller than the window or else it will take up the entire width of the window.
You could use media queries to specify a minimum margin, and then transition to auto for larger screen sizes.

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

Aligning a div to center of page while its position is absolute?

UPDATE: This is an old answer and the answer currently just below this gives a nicer solution which works even if your div has dynamic width. Another alternative, using margin: auto, can be found here, on a different, but related, question.

You can do this if you know the width of the DIV you want to centre.

CSS:

div
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-top: -150px;
    margin-left: -200px;
}

You position the top left corner in the centre, and then use negative margins which are half of the width to centre it.

Center absolute positioned div

If i understood your question then it will work as below.

You can do it in three ways.

No1 - Using position. Apply width 100% to button parent div and apply the button style as bellow.

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
    position: absolute;          /* Position absolute */
    left: 50%;                   /* Move 50% from left */
    bottom: 10px;                /* Move 10px from bottom */
    transform: translateX(-50%); /* Move button Center position  */
}

No2 - Using parent div, apply width 100% to your parent div and remove the postion absolute from button.

.parentDiv {
    width: 100%;            /* for full width */
    text-align: center;     /* for child element center */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
}

No3 - Using margin, apply width 100% to your parent div and remove the postion absolute from button.

.parentDiv {
    width: 100%;            /* for full width */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */        
    margin: 0 auto;              /* For button center */
}

How to center contents of an absolute div horizontally

Use width:100% in absolute div

.home .center {
    position: absolute;
    bottom: 0;
    top:30px;
    text-align: center;
    width:100%;
}

Updated fiddle

Center absolute div in another div

The easy way to vertically and horizontally center a div into another goes like this:

.container { position: relative; width: 100px; /* not part of solution */ height: 100px; /* not part of solution */ background-color: #808; /* not part of solution */ border-radius: 50%; /* not part of solution */}.content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; /* not part of solution */}

<div class="container">    <div class="content">I'm absolutly centered</div></div>

How to center div vertically inside of absolutely positioned parent div

First of all note that vertical-align is only applicable to table cells and inline-level elements.

There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I'll show you two methods from my favorites:

1. Using `transform` and `top`

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Center Content in a Absolute Positioned Div

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