Skip to main content
Dar formato a la pregunta
Origen Enlace
Javi fer2
  • 6.9k
  • 7
  • 13
  • 24

No he podido lograr que un texto se alinea horizontal y verticalmentealinee horizontal y verticalmente dentro de un div, no se que esta ocurriendodiv. 

Tengo el siguiente csscss:

html, body {
    position: relative;
    margin:0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

div{
    display: grid;
        background-color: blue;
        max-height: 200px;
        min-height: 200px;
        min-width: 100%;
        max-width: 100%;
    }
    div p{

        color:white ;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
<div>
    <p>{tkn}</p>
</div>

En teoría el parrafopárrafo dentro del divdiv debería salir centrado tanto horizontalhorizontal como verticalvertical según el csscódigo css, pero el texto me lo esta pintando en la parte de arriba. 

Es decir que no lo esta centrando verticalmenteverticalmente, solo horizontalmemtehorizontalmente.

No he podido lograr que un texto se alinea horizontal y verticalmente dentro de un div, no se que esta ocurriendo. Tengo el siguiente css:

html, body {
    position: relative;
    margin:0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

div{
    display: grid;
        background-color: blue;
        max-height: 200px;
        min-height: 200px;
        min-width: 100%;
        max-width: 100%;
    }
    div p{

        color:white ;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
<div>
    <p>{tkn}</p>
</div>

En teoría el parrafo dentro del div debería salir centrado tanto horizontal como vertical según el css pero el texto me lo esta pintando en la parte de arriba. Es decir que no lo esta centrando verticalmente, solo horizontalmemte.

No he podido lograr que un texto se alinee horizontal y verticalmente dentro de un div. 

Tengo el siguiente css:

html, body {
    position: relative;
    margin:0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

div{
    display: grid;
        background-color: blue;
        max-height: 200px;
        min-height: 200px;
        min-width: 100%;
        max-width: 100%;
    }
    div p{

        color:white ;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
<div>
    <p>{tkn}</p>
</div>

En teoría el párrafo dentro del div debería salir centrado tanto horizontal como vertical según el código css, pero el texto me lo esta pintando en la parte de arriba. 

Es decir que no lo esta centrando verticalmente, solo horizontalmente.

Origen Enlace

Como centrar y/o alinear contenido dentro de un div con CSS

No he podido lograr que un texto se alinea horizontal y verticalmente dentro de un div, no se que esta ocurriendo. Tengo el siguiente css:

html, body {
    position: relative;
    margin:0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

div{
    display: grid;
        background-color: blue;
        max-height: 200px;
        min-height: 200px;
        min-width: 100%;
        max-width: 100%;
    }
    div p{

        color:white ;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
<div>
    <p>{tkn}</p>
</div>

En teoría el parrafo dentro del div debería salir centrado tanto horizontal como vertical según el css pero el texto me lo esta pintando en la parte de arriba. Es decir que no lo esta centrando verticalmente, solo horizontalmemte.