position: fixed + margin

[orel]

Здравствуйте. Уж очень давно пытаюсь разобраться с одной вещью - взаимоотношениями position:fixed и margin:auto

Ситуация такая: нужно чтобы был неподвижный при прокрутке блок, при этом чтобы он всегда находился по центру вне зависимости от разрешения экрана.

Вот блок, сейчас вот бьюсь с кнопкой "Наверх"

Стрелкой показано куда нужно сместить блок, css привязанный к блоку такой:

#upButton{
position:fixed;
margin:auto;
bottom:0px;
background: #b1b1b1;
color: #ffffff;
width:100px;
height:30px;
font: 14pt Calibri;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Смог добиться такого результата только вложив блок который должен быть по середине в другой блок, результат вот:

Css и Html:

 Css:
#music-box{
position:fixed;
width:100%;
z-index:6;
}

#music {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background-color: #ffffff;
width:600px;
height:40px;
background-repeat: no-repeat;
margin:auto;
text-align:left;
}

HTML:
 <div id="music-box">
 <div id="music" class="music">
<div id="audioplayer425">....</div>
 </div>
 </div>

Но хочу найти более простой способ. Если есть - пожалуйста помогите. А то тот способ который у меня работает на "плеере" (2 скриншот) уж очень неудобен.

Заранее спасибо!

[DStereo]

Нужно прописать для блока .music:

.music{
    background:#fff;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    width:600px;
    height:40px;
    margin-left:-300px;
    position:fixed;
    left:50%;
}

[orel]

  On 1/21/2012 at 7:28 PM, DStereo said:

Нужно прописать для блока .music:

.music{
    background:#fff;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    width:600px;
    height:40px;
    margin-left:-300px;
    position:fixed;
    left:50%;
}

Спасибо! Я думаю что тоже самое сработает и с блоком .upButton

Edited January 21, 2012 by orel