4

Tengo dos divs dentro de un contenedor que ocupa el 100% de la pantalla. Estos dos divs tienen distintos tamaños tanto de ancho como de alto, y quería alinearlos a ambos en el centro del div contenedor.

Dejo una imagen de lo que quiero lograr y mi código.

<div class="row" style="margin: auto; height: 100%"> 

  <h2>¡Hola mundo!</h2>     

  <div class="col-lg-6">
    Soy el div grande naranja
  </div>

  <div class="col-lg-4"> 
    Soy el div más chico verde                         
  </div>

</div>

Lo que quiero lograr

2 respuestas 2

8

A través de las clases mx-auto y my-auto que nos proporciona Bootstrap puedes centrar los <div> internos tanto verticalmente como horizontalmente.

#contenedor {
  border: 2px solid blue;
  height: 400px;
}

#naranja {
  background-color: orange;
  height: 300px;
}

#verde {
  background-color: green;
  height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="contenedor" class="row">
  <div id="naranja" class="col-6 my-auto mx-auto">
      Soy el div grande naranja
  </div>
            
  <div id="verde" class="col-4 my-auto mx-auto"> 
       Soy el div más chico verde                         
  </div>
</div>

Una alternativa sin el uso de las clases de Bootstrap:

#contenedor {
  border: 2px solid blue;
  height: 400px;
}

#naranja {
  background-color: orange;
  height: 300px;
  margin: auto;
}

#verde {
  background-color: green;
  height: 200px;
  margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="contenedor" class="row">
  <div id="naranja" class="col-6">
      Soy el div grande naranja
  </div>
            
  <div id="verde" class="col-4"> 
       Soy el div más chico verde                         
  </div>
</div>

6
  • Estaba respondiendo lo mismo que tú, ahora me ha tocado eliminar lo que llevaba jajaja. Por cierto, esta es la forma más adecuada y simple de hacer lo que el OP pide. PD: Cabe aclarar que esto sólo funcionaría con BS en su verisón 4, de lo contrario con copiar las clases bastaría. Commented el 25 jul. 2019 a las 18:51
  • Yo estoy usando la versión 3.4.0 de BS. En ese caso, solo copio las clases que puso en los divs? Eso es lo que quieres decir? Commented el 25 jul. 2019 a las 19:00
  • Realmente estoy un poco en contra de utilizar clases de Bootstrap que aportan pocas reglas CSS con el fin de evitar que tus elementos adquieran una lista interminable de clases que complican muchas veces la lectura del HTML. Por esto mismo edito mi respuesta para presentar una alternativa.
    – phpMyGuel
    Commented el 25 jul. 2019 a las 19:03
  • Claro, en mi caso, estos divs no tienen un tamaño de alto fijo, sino que están hechos para ser adaptables. Por eso pregunto si en necesario que les ponga un alto fijo para que funcione el margin: auto Commented el 25 jul. 2019 a las 19:09
  • 1
    No, no es necesario, con un height dinámico también funcionaría.
    – phpMyGuel
    Commented el 25 jul. 2019 a las 19:12
-1

mira debería ser así para que salga como en la imagen, en caso de no ser así te recomiendo que te metas a w3schools ahí encuentras una respuesta mas certera a tu pregunta: https://www.w3schools.com/bootstrap4/

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h3>Este es el contenedor 1</h3>
      <p>Soy el div grande naranja</p>
    </div>
    <div class="col-lg-4">
      <h3>Column 2</h3>
      <p>Soy el div mas chico verde</p>
    </div>
</div>
</div>

Espero haberte ayudado suerte!.:D

2
  • Si no, puedes usar un div class=container distinto para cada uno y le modificas los estilos directamente desde la etiqueta para que el html tome prioridad a esos y no al del bootstrap.min.css Commented el 25 jul. 2019 a las 18:47
  • Esto no responde a la pregunta, es más, no tiene diferencias relevantes respecto al código que el OP presenta. Estarías haciendo lo mismo que ya tiene. Commented el 25 jul. 2019 a las 18:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.