How to center a div which position is absolute?

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

possible duplicate of [How do I horizontally center an absolute positioned element inside a 100% width div?](http://stackoverflow.com/questions/16758102/how-do-i-horizontally-center-an-absolute-positioned-element-inside-a-100-width) — TylerH, Apr 08 '14 at 13:05
Not really, because my text size varies. I've got more then one text div. This solution would let start my text at 50% but I want the middle of my text at 50%. — TobiasW, Apr 08 '14 at 13:08
In that case, possible duplicate of [Center text in an absolute position div](http://stackoverflow.com/questions/11690828/center-text-in-an-absolute-positioned-div) — TylerH, Apr 08 '14 at 13:10

score 4 · Answer 1 · answered Apr 08 '14 at 13:09

4

Do you want something like this:

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

And your text will be inside the slider:

EXAMPLE

answered Apr 08 '14 at 13:09

Barnee

3,212
8
41
53

+1, nice and simple. To OP: Just make sure you might wrap the HTML inside a separate "container" to centre the text in so your whole site doesn't get it's text now centred. – Nope Apr 08 '14 at 13:17
Thanks! Another option would be to add `text-align: center` to the `label`, because in this case he's got `width: 100%`. – Barnee Apr 08 '14 at 13:52

score 3 · Accepted Answer · answered Apr 08 '14 at 13:08

3

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

answered Apr 08 '14 at 13:08

Pradeep Pansari

1,287
6
10

Sorry, but I need the text inside the slider. – TobiasW Apr 08 '14 at 13:10
@PradeepPansari can you explain what you've done here? That way other people can take this answer and apply it to slightly different but similar problems. – TylerH Apr 08 '14 at 13:22

score 1 · Answer 3 · edited May 23 '17 at 10:33

1

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');

edited May 23 '17 at 10:33

Community

1
1

answered Apr 08 '14 at 13:19

b4ttl3m4st3r

106
11

score 0 · Answer 4 · answered Apr 08 '14 at 13:12

0

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

answered Apr 08 '14 at 13:12

mheisig

145
1
6

Disregard this, Pradeep's answer is more accurate. – mheisig Apr 08 '14 at 13:15

score 0 · Answer 5 · answered Apr 08 '14 at 13:13

0

use:

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

Working Fiddle

answered Apr 08 '14 at 13:13

Milind Anantwar

81,290
25
94
125

score 0 · Answer 6 · answered Apr 08 '14 at 13:22

0

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;
}

answered Apr 08 '14 at 13:22

AlexPrinceton

1,173
9
12

score 0 · Answer 7 · answered Apr 08 '14 at 13:24

0

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

answered Apr 08 '14 at 13:24

ApusApus

276
1
5

How to center a div which position is absolute?

7 Answers7