centro alinhando uma posição fixa div

Estou tentando obter uma div que tenha o position:fixedcentro alinhado na minha página.

Eu sempre fui capaz de fazê-lo com divs absolutamente posicionados usando esse "hack"

left: 50%; width: 400px; margin-left:-200px

... onde o valor da margem esquerda é metade da largura da div.

Isso não parece funcionar para divs de posição fixa, apenas os coloca com o canto mais à esquerda em 50% e ignora a declaração de margem esquerda.

Alguma idéia de como consertar isso para que eu possa alinhar os elementos posicionados fixos?

E eu colocarei um M&M bônus se você puder me dizer uma maneira melhor de centralizar o alinhamento de elementos absolutamente posicionados do que o descrito acima.

A resposta de Koen não centraliza exatamente o elemento.

A maneira correta é usar a CCS3 transformpropriedade. Embora não seja suportado em alguns navegadores antigos . E nem precisamos definir um par ou fixo width.

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Trabalhando jsfiddle comparação aqui .

Para aqueles com o mesmo problema, mas com um design responsivo, você também pode usar:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

Fazer isso sempre manterá seu fixo divcentralizado na tela, mesmo com um design responsivo.

Você também pode usar o flexbox.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

No post acima, acho que a melhor maneira é

1. Tenha uma div fixa com width: 100%
2. Dentro da div, faça uma nova div estática com margin-left: autoe margin-right: auto, ou para a tabela align="center".
3. Tadaaaah, você centrou seu div fixo agora

Espero que isso ajude.

Divs normais devem usar margin-left: autoe margin-right: auto, mas isso não funciona para divs fixas. A maneira de contornar isso é semelhante à resposta de Andrew , mas não usa a <center>coisa obsoleta . Basicamente, basta dar à div fixa um wrapper.

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

<div id="wrapper">
    <div id="fixed_div"></div>
</div

Isso centralizará uma div fixa dentro de uma div, permitindo que a div reaja com o navegador. ou seja, a div será centralizada se houver espaço suficiente, mas colidirá com a borda do navegador se não houver; semelhante a como uma div central regular reage.

Se você deseja centralizar o alinhamento de uma posição fixa div na vertical e na horizontal, use este

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

Isso deve fazer o mesmo.

Se você sabe que a largura é de 400 px, seria a maneira mais fácil de fazer isso, eu acho.

 left: calc(50% - 200px);

Isso funciona se você deseja que o elemento se espalhe pela página como outra barra de navegação.

width: calc (width: 100% - width, o que mais estiver fora do centro)

Por exemplo, se sua barra de navegação lateral for 200px:

largura: calc (100% - 200px);

É bastante fácil usar largura: 70%; esquerda: 15%;

Define a largura do elemento para 70% da janela e deixa 15% nos dois lados

Usei o seguinte com o Twitter Bootstrap (v3)

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

Ou seja, faça um elemento de largura total que seja posição fixa e, apenas empurre um contêiner nele, o contêiner será centralizado em relação à largura total. Também deve se comportar bem responsivamente.

Uma solução usando caixa flexível; totalmente responsivo:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

se você não quiser usar o método wrapper. então você pode fazer isso:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}