132

posicionar uma div no centro de uma página responsiva

Preciso criar uma página responsiva usando o bootstrap posicionando uma div no centro de uma página, como no layout abaixo mencionado.

css twitter-bootstrap responsive-design

— Rama Priya
fonte

stackoverflow.com/questions/9554724/…

— Kenny Thompson ''

Eu preciso centralizar uma div com o texto (Design responsivo usando bootstrap), que deve estar presente dentro de outra div centralizada de largura total col-lg-12, como no layout. seria útil se eu conseguir o código de exemplo no violino

— Rama Priya

173

ATUALIZAÇÃO para Bootstrap 4

Alinhamento vertical mais simples da grade com caixa flexível

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 row align-items-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

Expandir snippet

Solução para Bootstrap 3

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

Expandir snippet

É um exemplo simples de uma divisão horizontal e vertical centrada em todos os tamanhos de tela.

— ppollono
fonte

41

Talvez class="col-xs-4 col-xs-offset-4"seja o suficiente.

— L105

Eu tenho para posicionar o centro div col-lg-12 verticalmente em todos os tamanhos de tela

— Rama Priya

1

Eu encontrei a solução para você verificar este violino jsfiddle.net/Palapas/52VtD/687 o recipiente deve ter altura de 100%, caso contrário você precisa usar a posição absoluta

— ppollono

45

CSS:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML:

<div class="container">
  <div>
    example
  </div>
</div>

Violino de exemplo

— vocasle
fonte

1

esta solução não funciona quando abro meu site no celular.

— código é o seguinte

2

Olá, qual navegador você estava usando? Você carregou as folhas de estilo e o javascript do Bootstrap? Está funcionando no Firefox e Chrome. Testado em todos os tamanhos de tela.

— vocasle

Eu testei isso redimensionando meu navegador e usando um verificador de site responsivo. Funciona para mim.

— quer

1

esta correcção está quebrando estilos padrão de bootstrap

— ppollono

21

No bootstrap 4

para centralizar os filhos horizontalmente , use a classe bootstrap-4

justify-content-center

para centralizar os filhos verticalmente , use a classe bootstrap-4

 align-items-center

mas lembre-se de não se esqueça de usar a classe d-flex com estes, é uma classe de utilitário bootstrap-4, assim

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <div class="bg-primary">MIDDLE</div>    
</div>

Nota: certifique-se de adicionar os utilitários bootstrap-4 se este código não funcionar

11

Atualização para o Bootstrap 4

Agora que o Bootstrap 4 é flexbox, o alinhamento vertical é mais fácil. Dada uma div flexbox de altura total, apenas nós my-autopara margens superiores e inferiores ...

<div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
      <h1 class="display-3">Hello, world!</h1>
    </div>
</div>

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

Centro vertical em Bootstrap 4

— Zim
fonte

5

Você não precisa alterar nada em CSS. Você pode escrever isso diretamente na classe e obterá o resultado.

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

— Jay
fonte

4

sem tabela de exibição e sem bootstrap, eu prefiro fazer isso

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

— Matoeil
fonte

2

Boa resposta ppollono. Eu estava apenas brincando e consegui uma solução um pouco melhor. O CSS permaneceria o mesmo, ou seja:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

Mas para HTML:

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

Isso seria suficiente.

— simranjazz
fonte

2

Não é a melhor maneira, mas ainda funcionará

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>

— Tarun Rawat
fonte

1

Eu acho que a maneira mais simples de realizar o layout com o bootstrap é assim:

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

tudo o que fiz foi adicionar camadas de divs que permitiram centralizar a div, mas como não estou usando porcentagens, é necessário especificar a largura máxima da div para o centro.

Você pode usar esse mesmo método para centralizar mais de uma coluna, basta adicionar mais camadas div:

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Nota: que eu adicionei uma div com a coluna 12 para md, sm e xs. Se você não fizer isso, a primeira div com cor de fundo (neste caso "blueviolet") entrará em colapso, você poderá ver as divs filho , mas não a cor do plano de fundo.

— TheOneAndOnly ME
fonte

1

Para a versão atual do Bootstrap 4.3.1, use

Estilo

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

Código

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

1

Tente isso. Por exemplo, usei uma altura fixa. Eu acho que não afeta o cenário responsivo.

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

Expandir snippet

— sanka sanjeeva
fonte

1

No Bootstrap 4, use:

<div class="d-flex justify-content-center">...</div>

Você também pode alterar a posição, dependendo do que deseja:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Referência aqui

— Wariored
fonte

-1

Aqui estão regras simples de CSS que colocam qualquer div no centro

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

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

— Sravan
fonte

Você poderia expandir sua resposta? Os links tendem a ficar obsoletos ao longo do tempo.

— Orique 20/04/2015

2

Além disso, esse não é o "caminho de inicialização" para conseguir isso.

— precisa saber é o seguinte

-1

A solução mais simples será adicionar uma coluna em branco nos dois lados, como abaixo:

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

— Yuvraj Patil
fonte

-2

jsFiddle

HTML :

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

CSS :

#parent {    
    text-align: center;
}
#child {
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;
}

— rbsthlm
fonte

Em uma página responsiva de auto-inicialização, como centralizar uma div

jsFiddle