0

me encuentro aprendiendo HTML y CSS, se como organizar las cosas en el medio de la pantalla utilizando

margin-left:auto;
margin-right:auto;

pero no se como posicionar un bloque en medio de forma vertical.

El codigo CSS del bloque que quiero posicionar es el siguiente:

.content {
  height: 350px;
  background-color: chocolate;
  margin-left: 10%;
  margin-right: 10%;
  padding: 5%;
}
<div class="container">
  <div class="content"></div>
</div>

3
  • Solamente verticalmente el centrado?
    – user128299
    Commented el 26 nov. 2020 a las 8:01
  • Claro, ya que horizontalmente lo que hago es margin-left:auto margin-right:auto @BetaM Commented el 26 nov. 2020 a las 8:16
  • que quieres posicionar o quieres posicionar todo lo que se encuentra dentro el contenerdor .content?. Por favor puedes agregar que tienes dentro de .content
    – DavElsanto
    Commented el 26 nov. 2020 a las 14:20

3 respuestas 3

2

Puedes hacerlo con position o flexbox de css, te recomiendo este último, un ejemplo... Tienes que meter tu contenedor en uno padre, y darle el alto que quieres dependiendo de a que altura quieres quieres centrarlo.

.container {
  height: 100vh; /* suponiendo que quieres centrar respecto a todo el alto de la pantalla */
  width: 100%;
  display: flex; /* propiedad flexbox */
  justify-content: center; /* centra el contenido horizontalmmente */
  align-items: center; /* centra el contenido verticalmente */
}

.content{
  height: 350px;
  width: 350px;
  background-color: chocolate;
  padding: 5%;
}
<div class="container">
  <div class="content"></div>
</div>

1
  • todavía no se sabe qué elemento quiere posicionar, ni que tecnología quiere usar flex, grid, etc.
    – DavElsanto
    Commented el 26 nov. 2020 a las 14:19
0

Yo he usado este, lo importante en si es el margin, espero que te sirva

.contenedor {
  width: 90%;
  height: auto;
  overflow: hidden;
  background: rgba(66, 68, 63, 0.55);
  margin: 20px auto;
  padding: 20px;
  text-align: center;
}
<div class="container">
  <div class="contenedor">a</div>
</div>

0

Ocupas una línea de CSS

.content {
  text-align:center;
  height: 350px;/*Esta es la altura que le estás dando al div*/
  line-height:350px;/*Entonces le dices que el contenido se ajusto al centro de su propia altura*/
  background-color: chocolate;
  margin-left: 10%;
  margin-right: 10%;
  padding: 5%;
}
<div class="container">
  <div class="content"><h3>Aqui va el contenido</h3></div>
</div>

y eso es todo

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.