如何居中绝对位置的div？

Question

I've got the following code:

HTML:

<div class="label">Middle</div>
<div id='sliderdiv'>
    <input type="range" value="50" min="0" max="100" />
</div>

CSS:

 .label {
     position: absolute;
     margin-top: 13px;
     margin-left: auto;
     margin-right: auto;
     z-index: 3;
 }
 input.ui-slider-input {
     display: none !important;
 }
 #sliderdiv .ui-slider-track {
     margin-left: 15px;
 }

But I can't center my text div, is there a solution for this problem or is it not possible with css?

I could calculate it dynamically with javascript for sure, but I'd like to avoid that.

Here is the live code for you: http://jsfiddle.net/VmwQM/

Edit:

This is not what I want:

.label {
         position: absolute;
         margin-top: 13px;
         margin-left: 50%;
         z-index: 3;
     }

Because I want my text middle at 50% and not my text to start at 50%.

Answer 1

Do you want something like this:

 body {
     text-align: center;
 }
 .label {
   width: 100%;
 }

And your text will be inside the slider:

EXAMPLE

Answer 2

You can try this:

Fiddle here

.label {
 position:absolute;
 top:11px;
 width:100%;
 z-index: 3;
 text-align:center;
}
input.ui-slider-input {
 display: none !important;
}
#sliderdiv .ui-slider-track {
 margin-left: 15px;
}

Good Luck..

Answer 3

You cannot center elements using margin:auto that are absolutely positioned. The display-attribute of them is automatically set to inline .

Why margin:auto doesn't work?

jQuery-Solution can be:

var left = $(window).width() / 2 - $('.label').width() / 2;
$('.label').css('left',left+'px');

Answer 4

The margin: 0 auto won't work for absolutely positioned element. Just set the left or right property to 50%:

.label {
  position: absolute;
  margin-top: 13px;
  left: 50%;
  z-index: 3;
}

And don't forget that absolute positioning is calculated with respect to the parent. You may have other markup around beyond that example that would affect what position: absolute does when applied to .label

Answer 5

use:

  left: 50%;
  margin-left: -25px;

Working Fiddle

Answer 6

HTML

<div class="slide-holder">
    <div id='sliderdiv'>
        <input type="range" value="50" min="0" max="100" />
    </div>
</div>

CSS

.slide-holder {
    text-align: center;
}
#sliderdiv {
    display: inline-block;
}

Answer 7

You can center it provided you give a width value:

.label {
    position: absolute;
    margin: 13px auto auto;
    width: 3rem;
    right: 0; left: 0;
}

More info on centering absolute elements with just css in this smashing magazine article