html - verticalmente - vertical divs




Centralização horizontal de CSS de um div fixo? (5)

#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

Eu sei que esta questão é um milhão de vezes por aí, no entanto não consigo encontrar uma solução para o meu caso. Eu tenho um div, que deve ser corrigido na tela, mesmo que a página seja rolada, deve sempre ficar centrada no meio da tela!

O div deve ter 500px largura de 500px , deve estar a 30px do topo (margem superior), deve ser centrado horizontalmente no meio da página para todos os tamanhos de navegador e não deve se mover ao rolar o restante da página.

Isso é possível?


É possível centralizar horisontalmente o div desta maneira:

html:

<div class="container">
    <div class="inner">content</div>
</div>

css:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

Usando desta forma você terá sempre seu bloco interno centralizado, além disso, ele pode ser facilmente convertido para verdadeiro responsivo (no exemplo, ele será apenas fluido em telas menores), portanto, não há limitação em como no exemplo da pergunta e na resposta escolhida .


... ou você pode incluir o menu div em outro:

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


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

Se usar inline-blocks for uma opção, eu recomendaria essa abordagem:

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
} 

Eu escrevi um post curto sobre isso aqui: http://salomvary.github.com/position-fixed-horizontally-centered.html


Edit September 2016: Embora seja bom receber uma subida de votos ocasionais para isso, porque o mundo seguiu em frente, eu agora tenho a resposta que usa transform (e que tem uma tonelada de votos positivos). Eu não faria mais assim.

Outra maneira de não ter que calcular uma margem ou precisar de um sub-container:

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}

left: 50%;
margin-left: -400px; /* Half of the width */




centering