How to align to the center a div with position absolute within a div with position relative?

Question

I want to place #carousel-paginator in the center of .content-snippet.

With the following CSS cannot get the desired result http://jsfiddle.net/y7S7Z/

Could you tell me what is wrong and how to fix it?

Note: #carousel-paginator is created dynamically and could have different size on every page request.

HTML

<div id="snippet-cnt-0" class="content-snippet">
                            <!-- cnt adv carousel -->
                            <div id="carousel-paginator"><ul>
                                <li id="paginator-0" class="item-paginator">0</li>
                                <li id="paginator-1" class="item-paginator activePaginator">1</li>
                                <li id="paginator-2" class="item-paginator">2</li><li id="paginator-3" class="item-paginator">3</li>
                                <li id="paginator-4" class="item-paginator">4</li><li id="paginator-5" class="item-paginator">5</li><li id="paginator-6" class="item-paginator">6</li></ul></div>
                            <div id="carousel-container">
                                <div id="carousel-inner">

                                    <ul id="carousel-ul"><li id="item-6" data-dataid="6" class="item focusable focus">6</li><li id="item-0" data-dataid="0" class="item focusable">0</li><li id="item-1" data-dataid="1" class="item focusable">1</li><li id="item-2" data-dataid="2" class="item focusable">2</li><li id="item-3" data-dataid="3" class="item focusable">3</li><li id="item-4" data-dataid="4" class="item focusable">4</li><li id="item-5" data-dataid="5" class="item focusable">5</li></ul>
                                </div>
                            </div>
                            <div id="btn-carousel-left">PREV</div>
                            <div id="btn-carousel-right">NEXT</div>
                        </div>

CSS

.content-snippet {
    height: 250px;
    outline: 1px solid green;
}
ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#carousel-paginator {
    position: absolute;
    top: 100px;
    z-index: 1;
}

#carousel-paginator > ul li {
    float: left;
    background-color: lightblue;
}

#carousel-paginator > ul li, #carousel-paginator .activePaginator {
    font-size: 18px;
    text-align: center;
}

Answer 1

If you know how many lines the pagination is going to take up (in this case, it's only ever 1 line) you do in-fact know the height of the element. This means you can use the line-height trick to center the element.

Here's the fiddle: http://jsfiddle.net/y7S7Z/10/

First, set the line-height on the pagination:

#carousel-paginator {
    position: absolute;
    top: 50%;
    z-index: 1;

    line-height: 1em;
}

At this point, our element is 50% from the top + 1em in line-height. Simply bring it up by half the line-height to center it vertically, like so:

#carousel-paginator {
    position: absolute;
    top: 50%;
    z-index: 1;

    line-height: 1em;
    margin-top: -0.5em;
}

If you want to center it horizontally too, that's pretty simple.

Set the width of the pagination to 100%, and set text-align to center:

#carousel-paginator {
    position: absolute;
    top: 50%;
    z-index: 1;

    line-height: 1em;
    margin-top: -0.5em;
    width: 100%;
    text-align: center;
}

And then you just need to make the ul inside inline-block (as you have the items inside floated left):

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;

    display: inline-block;
}

Answer 2

There is a nice CSS3 solution to positioning every item in the center of it's parent. If you have an absolutely position element.

Try adding

left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);

to your ID:

#carousel-paginator {
  position: absolute;
  top: 100px;
  z-index: 1;
  left:50%;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
}

http://jsfiddle.net/y7S7Z/6/

Always remember the prefixes!

Answer 3

Try this css:
#carousel-paginator { position: absolute; top: 100px; z-index: 1; left:250px;

}

Answer 4

A little edit at CSS because u give him that position absolute.absolute is position free and if u give position absolute ,it gone to the Top or Left.

    #carousel-paginator {
    position: absolute;
    top: 100px;
    z-index: 1;
    text-align:center;
    padding-left:350px;
    padding-right:350px;
}