Centro fixo div com largura dinâmica (CSS)

90

Eu tenho um div que terá este CSS:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Agora, como posso tornar este div centralizado? Posso usar, margin-left: -450px; left: 50%;mas isso só funcionará quando a tela for> 900 pixels. Depois disso (quando a janela tiver <900 pixels), ela não estará mais centralizada.

Claro que posso fazer isso com algum tipo de js, mas existe um modo "mais correto" de fazer isso com CSS?

css html center

— gubbfett
fonte

4

@Liam - Eu discordo, acho que essa questão é uma questão totalmente própria. Essas perguntas não respondem a esta em relação a ter um div sem largura fixa centralizado.

— Joshua M

O que Josué disse, é para centralizar um div em outro.

— gubbfett

7

@Liam - Além disso, você não pode usar um margin: 0 autoem um position: fixeddiv. Você ao menos leu a pergunta?

— Joshua M

^ não. eu tentei isso também. : p

— gubbfett

3

@JoshuaM Sua afirmação não está 100% correta. Veja minha resposta.

— laconbass

226

Você pode centralizar uma configuração de elemento posicionado fixedou e para , e então & para como se estivesse centralizando um elemento posicionado.absoluterightleft0margin-leftmargin-rightautostatic

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

Veja este exemplo trabalhando neste violino .

— Laconbass
fonte

1

Só para mencionar ... Não é tão inesperado, mas falha no IE7. Está posicionado a 0 px da esquerda aqui. Ele funciona perfeitamente como sempre no IE 8.

— gubbfett

Isso não funciona quando a largura do elemento é maior do que a largura da tela ... seria bom que funcionasse nessa situação.

— andrewb de

1

@andrewb você poderia aplicar uma margem igualmente negativa em righte leftde pelo menos a value >= witdth / 2, como visto em jsfiddle.net/PvfFy/168 , mas não é uma abordagem elegante IMHO. Eu testei no Chrome para me divertir, não sei se vai funcionar no resto

— laconbass

5

Fora do escopo da pergunta, isso depende da configuração da largura do elemento, portanto, não é ótimo se você tiver conteúdo dinâmico cuja largura seja variável ou desconhecida. Deixando a centralização de lado, eu normalmente faria isso com display: inline-block e sem largura definida. Alguém tem uma solução no-js para esse caso?

— enigment

4

A questão diz que largura dinâmica , esse é todo o problema, você não pode simplesmente ignorar isso.

— Gil Epshtain

56

Este é outro método se você puder usar a transformpropriedade CSS3 com segurança :

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... ou se você quiser centralização horizontal E vertical:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

— Alan Bellows
fonte

5

Contanto que seja para um navegador moderno, esta é a MELHOR solução para esta resposta! O único que é como um verdadeiro `float: center ', em que você pode clicar ao redor do elemento de envolvimento e não ficar preso tendo que procurar maneiras em torno dele. Amei essa resposta!

— SpYk3HH

1

Cuidado, não use tradução em porcentagem para centralizar o texto, pois ele será suavizado se o valor resultante for um float. Caramba, você não quer isso, não quer.

— gnou

O uso de transformações CSS pode causar suavização em mais do que apenas texto; Estou obtendo limites estranhos como resultado da transformação.

— Nathan K

1

Potencial de contração precoce ao alterar o tamanho da tela (dependendo do tamanho da divisão), resultando em grandes bordas ao redor da borda da divisão.

— Entidade Única de

7

<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Você precisa embrulhar em um recipiente. aqui está o css

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}

— Mathew Berg
fonte

Ah, gosto do seu pensamento. O div fixo será apenas um contêiner para outro div com o resultado real? Vou tentar este!

— gubbfett

Embora eu goste da intuição de sua resposta, não vejo como isso permitiria o suporte de ie6 / 7.

— Mathew Berg

1

@MathewBerg, boa observação sobre o ie6 / 7. Nesse caso, sua resposta deve funcionar melhor. Este é um pequeno OT, mas pessoalmente acho que os desenvolvedores não deveriam perder tempo consertando coisas para <= ie7. Acho que, na verdade, os desenvolvedores devem bloquear esses navegadores para forçar as pessoas e empresas com sistemas antigos a atualizar. É muito difícil vender essa ideia a um cliente pagante! ;)

— gubbfett

Sim, mas infelizmente algumas empresas exigem suporte para navegadores legados, não importa o quão longe possamos chegar. Vá em frente e aceite a minha resposta ou a de Laconbass, dependendo de suas necessidades.

— Mathew Berg

1

isso também não funciona, pois você ainda não pode clicar em "container"

— SpYk3HH

4

Isso funciona independentemente do tamanho do seu conteúdo

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

fonte: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

— Leonardo
fonte

2

cuidado: transform: translate(-50%, -50%);faz com que o texto fique desfocado (pelo menos no cromo)

— Jiří