0

Quiero centrar un elemento tanto horizontal como vertical usando display:flex; mi duda es cual de las 2 alturas usar he investigado del tema y dicen en foros que es mejor usar la min-height:100vh alguien me puede decir en que casos es mejor usar el height y en que otros el min-height

2 respuestas 2

1

min-height se utiliza para para definir la altura minima de un elemento height define el alto del elemento

para centrar horizontal y verticalmente usando flex podrias hacer lo siguiente

*{
margin: auto;

}
.contenedor{
  border: red 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px
  }
  
  .contenedor-centrado{
  border: blue 1px solid;
  min-width: 50%;
  min-height: 50%
  
  }
<html>
  <body>
  <div class="contenedor">
    <div class="contenedor-centrado">
     
    </div>
  </div>
  </body>
</html>

0

Con height estas dándole un alto definitivo al elemento, si el contenido necesita mas espacio se va a desbordar.

Con min-height le estas dando a un elemento un alto mínimo, si especificas un alto menor, el alto que tendrá el elemento sera el valor que asignaste a min-height, min-height no es aplicado cuando el height es mayor que min-height.

Ten en cuenta que cuando height es auto para cajas block significa que el contenido determinara el tamaño final y si el contenido no es suficiente para sobrepasar a min-height, se asumirá el valor de min-height como el alto del elemento.

Cuando usarlo depende de lo que quieras hacer, no siempre vas a querer que el alto de un elemento sea del tamaño del viewport...úsalo cuando necesites que el elemento tenga un tamaño mínimo.

Para centrar elementos no necesitas ninguna de las propiedades que mencionaste antes ya que no son para eso.

1
  • yo tenia un contenedor de tamaño height 605px y adentro tenia contenido al momento de responsive no lo tomaba no se porque :/, despues aplique min-height si si me sirvio mejor tanto en pantalla completa como en movil por eso pregunto cuano lo puedo usar, últimamente siempre uso es min-height Commented el 5 jun. 2020 a las 22:41

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