Centralizar uma posição: elemento fixo

438

Gostaria de criar uma position: fixed;caixa pop - up centralizada na tela com largura e altura dinâmicas. Eu usei margin: 5% auto;para isso. Sem position: fixed;ele, centra-se bem na horizontal, mas não na vertical. Depois de adicionar position: fixed;, ele nem é centralizado horizontalmente.

Aqui está o conjunto completo:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}

<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>

Expandir snippet

Como centralizo esta caixa na tela com CSS?

css css-position centering

— saturngod
fonte

605

Você precisa basicamente de conjunto tope leftpara 50%centralizar o canto superior esquerdo da div. Você também precisa definir a margin-tope margin-lefta metade negativa da altura e largura da div para mudar o centro para o meio da div.

Assim, desde que <!DOCTYPE html>(modo de padrões), isto deve fazer:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Ou, se você não se preocupa em centralizar verticalmente e navegadores antigos, como o IE6 / 7, também pode adicionar left: 0e right: 0ao elemento com um margin-lefte margin-rightde auto, para que o elemento posicionado fixo com uma largura fixa saiba onde fica sua esquerda e compensações certas começam. No seu caso, assim:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Novamente, isso funciona apenas no IE8 + se você se preocupa com o IE e centraliza apenas horizontalmente e não verticalmente.

— BalusC
fonte

8

Encontrei esse truque em css-tricks.com/… . Mas quando mudo a largura e a altura, ele não está se movendo para o centro. Sim, devo alterar a margem esquerda e superior quando alterar a altura e a largura.

— Saturngod

2

FYI: isso posicionará as coisas corretamente no meio, mas infelizmente você perde suas barras de rolagem - qualquer conteúdo cortado pela viewport não poderá ser acessado, mesmo se você rolar, porque a posição fixa é baseada na viewport, não no página. Até agora, a única solução que encontrei para isso é com javascript.

— Groxx

3

Groxx Eu acho que você pode colocar barras de rolagem dentro de uma div no pop-up usando a propriedade overflow .

— precisa

1

Além disso, para este você precisa conhecer a largura do elemento.

— Hector Ordonez

2

ah nm, se esse for o caso, quero dizer, é claro que o tamanho do navegador será dinâmico, não sei por que isso estava em questão. Em vez disso, pensei que ele quis dizer que as dimensões pop-up precisavam ser dinâmicas. esse é o caso para mim, então eu estou usando transform: translate (-50%, -50%); funciona muito bem, exceto não no IE8.

— noites

324

Quero fazer uma caixa pop-up centralizada na tela com largura e altura dinâmicas.

Aqui está uma abordagem moderna para centralizar horizontalmente um elemento com uma largura dinâmica - ele funciona em todos os navegadores modernos; suporte pode ser visto aqui .

Exemplo atualizado

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Para centralização vertical e horizontal, você pode usar o seguinte:

Exemplo atualizado

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

Você também pode adicionar mais propriedades prefixadas pelo fornecedor (veja os exemplos).

— Josh Crozier
fonte

1

Estou usando essa abordagem para centralizar horizontalmente uma imagem posicionada fixa, cuja largura é maior que a largura da janela e funciona bem pelo menos nas versões atuais do Firefox, Chrome, IE 11 e Edge.

— jelhan

1

Nos meus testes, isso funciona muito bem (atrás dos prefixos), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome e Safari, Android 4.4 ou superior Chrome. A única falha para mim foi o Android 4.0, onde a tradução não ocorreu.

— danjah

2

@ahnbizcad, isso funciona em navegadores de desktop como Chrome 61, Safari 11 e FireFox 65, mas não no Chrome 61 no Android 6, a resposta aceita funciona em todos os navegadores.

— Erik Barke

5

Isso torna as imagens borradas no Chrome.

— Tomasz P. Szynalski 10/0318

1

De alguma forma, apenas a abordagem que funcionou corretamente em todo o navegador com o meu img. Muito obrigado!

— Kugelfisch

136

Ou apenas adicione left: 0e right: 0ao seu CSS original, o que faz com que ele se comporte de maneira semelhante a um elemento não fixo normal e a técnica de margem automática usual funciona:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Observe que você precisa usar um HTML (X) válido DOCTYPEpara que ele se comporte corretamente no IE (que você deve ter de qualquer maneira ..!)

— Will Prescott
fonte

2

Em que sentido? O elemento pai é o elemento body, que não possui bordas. Se você adicionasse propriedades de borda ao corpo (?!), Com certeza seria afetado, assim como a técnica de 50% que imagino. Garanto que ele funciona bem com os parâmetros fornecidos, apenas verificado em todos os navegadores que eu tenho à mão, e tem o benefício adicional de não depender da largura do elemento.

— Prescott

5

Tudo o que fiz foi adicionar essas duas propriedades e um doctype ao exemplo de HTML do OP. No entanto, em testes posteriores, parece que o IE7 (ou 8 no modo compat) é o problema - parece que não respeita o valor da rightpropriedade se lefttambém estiver definido! ( msdn.microsoft.com/en-us/library/… observa que lefte rightapenas têm suporte "parcial" no IE7). OK, reconheço esta solução não é bom se o suporte IE7 é importante, mas um grande truque para se lembrar para o futuro :)

— Will Prescott

7

essa deve ser a resposta aceita. Eu tinha duas posições fixas, uma para a máscara de opacidade e outra para o modal. essa era a única maneira de centralizar a modal de posição fixa no centro da tela. Resposta impressionante que teria pensado?

— precisa

3

Eu concordo, esta deve ser a resposta aceita. Também funciona perfeitamente em design responsivo, pois não depende da largura.

— Hector Ordonez

7

Eu sugeriria simplificar a resposta, já que parte do CSS é relevante apenas para o OP. Tudo que você precisa é de posição: fixo; esquerda: 0; direita: 0; margem: 0 automático; .

— Hector Ordonez

23

Adicione um contêiner como:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

Em seguida, coloque sua caixa nesta div fará o trabalho.

— Romulus Urakagi Ts'ai
fonte

"text-align: center" não funcionou para mim ao centralizar a div interna.

— Nima

2

A caixa interna precisa ser display: inline-blockpara que isso funcione. (Alguns outros valores de exibição também pode funcionar, como o table.)

— Brilliand

uma abordagem melhor para o css mencionado acima seria adicionar margin:auto;e alterar a largura para width:50%ou width:400px. então o conteúdo pode ser texto direto, elementos de bloco ou elementos embutidos.

— 21713 Joshua Burns #

20

Basta adicionar:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

— Prumo
fonte

1

Isso não funciona position: fixed, e é disso que se trata a questão. Se estiver errado, edite sua resposta para incluir um snippet de código executável.

— Flimm

1

funciona muito bem com a posição fixa.

— 19418 Phuhui

1

Funciona com position: fixed, desde que defina o max-widthou widthpara o elemento

— Js Lim

7

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

no interior, pode haver qualquer elemento com largura, altura ou sem difenet. todos estão centralizados.

— praffessorr
fonte

5

Esta solução não exige que você defina uma largura e altura para sua div pop-up.

http://jsfiddle.net/4Ly4B/33/

E, em vez de calcular o tamanho do pop-up e menos a metade do topo, o javascript está redimensionando o popupContainer para preencher a tela inteira ...

(100% de altura, não funciona ao usar o display: célula de tabela; (que é necessário para centralizar algo verticalmente)) ...

De qualquer forma, funciona :)

— BjarkeCK
fonte

4

left: 0;
right: 0;

Não estava funcionando no IE7.

Alterado para

left:auto;
right:auto;

Começou a trabalhar, mas nos demais navegadores ele parou de funcionar! Então usado dessa maneira para o IE7 abaixo

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

— jatinder
fonte

Você se importa de editar sua resposta para incluir toda a solução?

— Flimm

Isso não funcionará sem uma margem automática nos lados esquerdo e direito.

— RoM4iK

2

Você pode basicamente envolvê-lo em outro dive definir positioncomo fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}

<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>

Expandir snippet

— Abdulla Dlshad
fonte

2

Eu usei vw(largura da janela de exibição) e vh(altura da janela de exibição). a janela de exibição é sua tela inteira. 100vwé a largura total da tela e 100vha altura total.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}

— Aseem
fonte

1

Para fixar a posição, use isto:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}

— HeadAndTail
fonte

3

Forneça uma explicação sobre por que sua solução funcionaria para a pergunta postada.

— Shekhar Chikara

0

Uma resposta possível :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>

— Martin Vahi
fonte

Isso parece funcionar, embora exija que você já saiba a largura e a altura do elemento.

— Flimm

0

Tente usar isso para elementos horizontais que não serão centralizados corretamente.

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

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

width: calc(100% - 200px);

— Robert Ross
fonte

0

Eu apenas uso algo assim:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

Ele centraliza a caixa de diálogo horizontal e verticalmente para mim, e posso usar diferentes larguras e alturas para ajustar diferentes resoluções de tela e torná-las responsivas, com consultas de mídia.

Não é uma opção se você ainda precisar fornecer suporte para navegadores em que as propriedades personalizadas de CSS ou calc()não são suportadas (verifique em caniuse).

— Fabien Snauwaert
fonte

0

Este funcionou melhor para mim:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

— Flafy
fonte

-13

A única solução infalível é usar a tabela align = center como em:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

Não posso acreditar que pessoas de todo o mundo desperdiçam esses copiosos tempo bobo para resolver um problema tão fundamental quanto centrar uma div. A solução css não funciona em todos os navegadores, a solução jquery é uma solução computacional de software e não é uma opção por outros motivos.

Eu perdi muito tempo repetidamente para evitar o uso da tabela, mas a experiência me diz para parar de combatê-la. Use tabela para centralizar div. Funciona o tempo todo em todos os navegadores! Nunca mais se preocupe.

— Cheong
fonte

11

Isso não responde à pergunta. Não existe um equivalente não CSS position:fixed.

— 21713 Brilliand