En una página receptiva de bootstrap, cómo centrar un div


132

posicionar un div en el centro de una página receptiva

Necesito crear una página receptiva usando bootstrap colocando un div en el centro de una página como en el diseño mencionado a continuación.



Necesito centrar un div con el texto (diseño receptivo usando bootstrap) que debe estar presente dentro de otro div centrado col-lg-12 de ancho completo como en el diseño. Sería útil si puedo obtener el código de muestra en violín
Rama Priya

Respuestas:


173

ACTUALIZACIÓN para Bootstrap 4

Alineación de cuadrícula vertical más simple con caja flexible

@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>

Solución 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>

Es un ejemplo simple de una división horizontal y vertical centrada en todos los tamaños de pantalla.


41
Quizás class="col-xs-4 col-xs-offset-4"debería ser suficiente.
L105

Tengo que colocar el div col-lg-12 verticalmente en el centro en todos los tamaños de pantalla
Rama Priya

1
Encontré la solución para que revises este violín jsfiddle.net/Palapas/52VtD/687 el contenedor debe tener una altura del 100%, de lo contrario, debes usar la posición 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>

Violín de ejemplo


1
Esta solución no funciona cuando abro mi sitio en el móvil.
codeinprogress

2
Hola, que navegador estabas usando? ¿Cargó las hojas de estilo de Bootstrap y javascript? Está funcionando en Firefox y Chrome. Probado en todos los tamaños de pantalla.
Vocasle

Probé esto cambiando el tamaño de mi navegador, así como usando un verificador de sitios web receptivo. Funciona para mi.
Rocky Kev

1
esta solución está rompiendo los estilos predeterminados de arranque
ppollono

21

En bootstrap 4

para centrar al niño horizontalmente , use la clase bootstrap-4

justify-content-center

para centrar al niño verticalmente , use la clase bootstrap-4

 align-items-center

pero recuerda no olvides usar la clase d-flex con estas, es una clase de utilidad bootstrap-4, así

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

Nota: asegúrese de agregar utilidades bootstrap-4 si este código no funciona



5

No necesita cambiar nada en CSS, puede escribir esto directamente en clase y obtendrá el 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>

ingrese la descripción de la imagen aquí


4

sin mesa de exhibición y sin bootstrap, preferiría hacer eso

<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


2

Buena respuesta ppollono. Solo estaba jugando y obtuve una solución un poco mejor. El CSS permanecería igual, es decir:

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

Pero para HTML:

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

Esto sería suficiente


2

No es la mejor manera, pero seguirá funcionando.

<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>

1

Creo que la forma más sencilla de lograr el diseño con bootstrap es así:

<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>

todo lo que hice fue agregar capas de divs que me permitieron centrar el div, pero como no estoy usando porcentajes, debe especificar el ancho máximo del div para que sea el centro.

Puede usar este mismo método para centrar más de una columna, solo necesita agregar más capas 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 agregué un div con la columna 12 para md, sm y xs, si no hace esto, el primer div con color de fondo (en este caso "blueviolet") colapsará, podrá ver los div secundarios , pero no el color de fondo.


1

Para la versión real de 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

Prueba esto, por ejemplo, usé una altura fija. Creo que no afecta el escenario receptivo.

<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>


1

En Bootstrap 4, use:

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

También puede cambiar la posición según lo que desee:

<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>

Referencia aquí



-1

La solución más simple será agregar una columna en blanco en ambos lados como a continuación:

  <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>

-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;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.