css Flex Flexbox centrar verticalmente垂直alinear alineado

Posted 2021-05-13

.contenedor {
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: center;  /* vertical */
    /*
     Posibles valores:
      -stretch
      -center	
      -flex-start	
      -flex-end	
      -baseline	
      -initial	
      -inherit  
    */	

    

    
    
    border: 1px solid red;
    width: 100%;
    height: 400px;
}

/* LISTADO TIPO GRILLA */

/* el que contiene a los items, el contenedor:*/
.contenedorListado {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/*En  breakpoints cambiar el ancho para seleccionar el numero de columnas*/
/*Este css se lo pongo al Quontrol contenedor */
.contenedorListado > .Quontrol {
    width: 25%;
    max-width: 25%;
}

/* items del listado, equivalentes a los .Quontrol de la regla anterior */
/* este codigo va en el Quontrol hijo */
.item {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

/* Para manejar los paddings/margins lo mejor ha sido agregar una caja dentro del hijo*/
.item .bounds {
    margin: 10px;
    margin-bottom: 18px;
}