Twitter Bootstrap - como centralizar elementos horizontalmente ou verticalmente

285

existe alguma maneira de centralizar elementos html vertical ou horizontalmente dentro dos pais principais?

css twitter-bootstrap sou eu
fonte

2

Este é um ótimo post sobre centralização horizontal e verticalmente: Veja Aqui

markvandencorput

2

Eu também estava enfrentando um problema de alinhamento horizontal; Eu simplesmente usei a <center></center>tag

Utpal - Ur Best Pal

4

@ Utpal-UrBestPal a <center>tag foi descontinuada há cerca de 12 anos.

Niels Keurentjes

246

Atualização : embora essa resposta provavelmente esteja correta no início de 2013, ela não deve mais ser usada. A solução adequada usa compensações .

Quanto à sugestão de outros usuários, também existem classes nativas de inicialização disponíveis, como:

class="text-center"
class="pagination-centered"

graças a @Henning e @trejder

sou eu
fonte

22

O mesmo estilo exato já está contido no Bootstrap; apenas usoclass="text-center"

Henning

3

Ou .pagination-centeredcomo alternativa.

Trejder

7

Essa deve ser a resposta, os outros ignoram toda a parte 'in bootstrap' da pergunta.

Ryan McDonough

1

@RyanMcDonough Sim, efetivamente, isso é riassuming todas as outras pessoas sugeridas, então eu verifiquei como a resposta ok?

itsme

1

Usar text-centerpara o layout é uma prática muito ruim. A maneira correta de alinhar colunas no Bootstrap é usando col-XX-offset-Yclasses. getbootstrap.com/css/#grid-offsetting . Essa resposta provavelmente estava certa em 2013, mas não deve mais ser usada hoje.

Niels Keurentjes

76

Na documentação do Bootstrap :

Defina um elemento para display: blocke centralize via margin. Disponível como mixin e classe.

<div class="center-block">...</div>

m0000g
fonte

55

Para futuros visitantes desta pergunta:

Se você estiver tentando centralizar uma imagem em uma div, mas a imagem não for centralizada, isso poderá descrever seu problema:

jsFiddle DEMO do problema

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

A img-responsiveclasse adiciona uma display:blockinstrução à tag da imagem, que interrompe text-align:center( text-centerclasse) o trabalho.

SOLUÇÃO:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

Adicionar a center-blockclasse substitui a display:blockinstrução inserida usando a img-responsiveclasse

Sem a img-responsiveclasse, a imagem centralizaria apenas adicionando text-centerclasse

Atualizar:

Além disso, você deve conhecer o básico de flexbox e como usá-lo, já que o Bootstrap4 agora o usa de forma nativa .

Aqui está um excelente vídeo tutorial rápido de Brad Schiff

Aqui está uma grande folha de dicas

cssyphus
fonte

32

Atualizado 2018

No Bootstrap 4 , os métodos de centralização foram alterados ..

Centro Horizontal em BS4

text-centerainda é usado para display:inlineelementos
mx-autosubstitui center-blockpara centrar display:flexcrianças
offset-* ou mx-auto pode ser usado para centralizar colunas da grade

mx-auto(margens de auto eixo x) vai centrar display:blockou display:flexos elementos que têm uma largura definida , ( %, vw, px, etc ..). O Flexbox é usado por padrão nas colunas da grade, portanto, também existem vários métodos de centralização do flexbox.

Demonstração Bootstrap 4 Centralização Horizontal

Para centralização vertical no BS4, consulte https://stackoverflow.com/a/41464397/171456

Zim
fonte

30

Você pode escrever diretamente no seu arquivo css assim:

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

<div class = "content" >
  
   <p> some text </p>
  </div>

Expandir snippet

kirgiz_jigit
fonte

9

Eu uso isso

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

atabak
fonte

1

Não funciona em certos casos (ver comentário sobre essencialmente a mesma resposta e não fazer uso de classes específicas do Bootstrap para centrar .

Dan Dascalescu

7

para centralizar horizontalmente, você pode ter algo parecido com isto:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

PersianMan
fonte

4

Não funciona (pelo menos não na implementação atual), quando usado diretamente em uma imagem: <img src="img/logo.png" style="float:none; margin:0 auto" />. Em torno daimg pais dive dar .text-centerou dar .pagination-centeredaula aos pais funciona como um encanto.

Trejder

2

para centralizar um elemento com margem: 0 auto, você precisa adicionar uma largura a esse elemento. No exemplo acima, não há largura especificada porque span8 tem uma largura no boobstrap, mas sua imagem não o faz. <Img src = "img / logo.png" style = "float: none; margin: 0 auto; width: 300px" /> vai centrar horizontalmente a imagem no interior do pai

Raul

2

Isso ignora a parte "Bootstrap" da pergunta.

Dan Dascalescu

5

Eu gosto desta solução de uma pergunta semelhante. https://stackoverflow.com/a/25036303/2364401 Use a text-centerclasse de autoinicialização nos dados reais da tabela <td>e nos <th>elementos do cabeçalho da tabela . assim

<td class="text-center">Cell data</td>

e

<th class="text-center">Header cell data</th>

xander-miller
fonte

5

Com o bootstrap 4, você pode usar o flex

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

fonte: bootstrap 4.1

alvseek
fonte

3

bootstrap 4 + Flex resolva isso

você pode usar

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

Expandir snippet

deve centralizar o centro horizontalmente e verticalmente

taoufiqaitali
fonte

0

Descobri no Bootstrap 4 que você pode fazer isso:

horizontal centro é realmente text-centerclasse

no centro vertical, no entanto, o uso de classes de autoinicialização está adicionando ambos, mb-auto mt-autopara que a margem superior e inferior da margem sejam definidas como automáticas.

Thomas online
fonte

0

para o centro vertical bootstrap4 de poucos itens

d-flex para regras flex

coluna flexível para direção vertical nos itens

justificar-centro de conteúdo para centralizar

style = 'height: 300px;' deve ter pontos de ajuste onde o centro deve ser calculado ou usar a classe h-100

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>

Ramil Gilfanov
fonte

Twitter Bootstrap - como centralizar elementos horizontalmente ou verticalmente

Respostas:

Atualizar: