¿Cómo alinear todo el cuerpo html al centro?

Question 1

¿Cómo alineo todo el cuerpo html con el centro?

Question 2

Me encontré con esta publicación anterior, y aunque estoy seguro de que user01 ha encontrado su respuesta hace mucho tiempo, descubrí que las respuestas actuales no funcionan del todo. Después de jugar un poco usando la información proporcionada por los demás, encontré una solución que funcionaba en IE, Firefox y Chrome. En CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

Esto es casi idéntico a la respuesta de Abernier, pero descubrí que incluir el ancho rompería el centrado, al igual que omitir el margen automático. Espero que cualquier otra persona que se tropiece con este hilo encuentre útil mi respuesta.

Nota: omita html, body { height: 100%; }centrar solo horizontalmente.

Question 3

Puedes probar:

body{ margin:0 auto; }

Question 4

EDITAR

A partir de hoy con flexbox, podría

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

RESPUESTA ANTERIOR

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

Question 5

Si tengo algo que me encanta compartir con respecto a CSS, es MI MANERA FAVORITA DE CENTRAR LAS COSAS EN AMBOS EJES !!!

Ventajas de este método :

Total compatibilidad con los navegadores que la gente usa realmente
No se requieren tablas
Altamente reutilizable para centrar cualquier otro elemento dentro de su padre
¡Se adapta a padres e hijos con dimensiones dinámicas (cambiantes)!

Siempre hago esto usando 2 clases: una para especificar el elemento padre, cuyo contenido estará centrado ( .centered-wrapper), y la segunda para especificar qué hijo del padre está centrado ( .centered-content). Esta segunda clase es útil en el caso de que el padre tenga varios hijos, pero solo uno debe estar centrado). En este caso, bodyserá el .centered-wrapper, y un interno divserá .centered-content.

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

La idea para centrar ahora será hacer .centered-contentun inline-block. Esto facilitará fácilmente el centrado horizontal, a través text-align: center;y también permitirá el centrado vertical como verá.

.centered-wrapper {
    position: relative;
    text-align: center;
}
.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
.centered-content {
    display: inline-block;
    vertical-align: middle;
}

¡Esto le brinda 2 clases realmente reutilizables para centrar a cualquier niño dentro de cualquier padre! Solo agregue las clases .centered-wrappery .centered-content.

Entonces, ¿qué pasa con ese :beforeelemento? Facilita vertical-align: middle;y es necesario porque la alineación vertical no es relativa a la altura del padre, la alineación vertical es relativa a la altura del hermano más alto. . Por lo tanto, al asegurarnos de que haya un hermano cuya altura sea la altura del padre (100% de altura, 0 de ancho para hacerlo invisible), sabemos que la alineación vertical será con respecto a la altura del padre.

Una última cosa: debe asegurarse de que sus etiquetas htmly bodysean del tamaño de la ventana para que centrarse en ellas sea lo mismo que centrarse en el navegador.

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

Violín: https://jsfiddle.net/gershy/g121g72a/

Question 6

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0; 
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Question 7

Yo uso flexbox encendido html. Para un efecto agradable, puede hacer coincidir el cromo de los navegadores para enmarcar su contenido en tamaños de pantalla más grandes que los máximos de su página. Encuentro que #eeeeeeencaja bastante bien. Podría agregar una sombra de caja para un bonito efecto de flotación.

    html{
        display: flex;
        flex-flow: row nowrap;  
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

imagen / datos cortesía de StatCounter

Question 8

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

Simplemente aplique este estilo antes de aplicar cualquier CSS. Puede cambiar el ancho según sus necesidades.

Question 9

Solo escribe

<body>
   <center>
            *Your Code Here*
   </center></body>

Question 10

Prueba esto

body {
max-width: max-content;
margin: auto;
}

Answer 1

93

¿Cómo alineo todo el cuerpo html con el centro?

html css Rajat Gupta
fuente

4

Horizontal, vertical o ambos?

Ciro Santilli 郝海东冠状病六四事件法轮功

Answer 2

4

Horizontal, vertical o ambos?

Ciro Santilli 郝海东冠状病六四事件法轮功

Answer 3

Me encontré con esta publicación anterior, y aunque estoy seguro de que user01 ha encontrado su respuesta hace mucho tiempo, descubrí que las respuestas actuales no funcionan del todo. Después de jugar un poco usando la información proporcionada por los demás, encontré una solución que funcionaba en IE, Firefox y Chrome. En CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

Esto es casi idéntico a la respuesta de Abernier, pero descubrí que incluir el ancho rompería el centrado, al igual que omitir el margen automático. Espero que cualquier otra persona que se tropiece con este hilo encuentre útil mi respuesta.

Nota: omita html, body { height: 100%; }centrar solo horizontalmente.

Answer 4

Buena respuesta. Me pregunto (ya que no tengo mucha experiencia con HTML), ¿es necesario establecer la altura al 100%?

puesta del sol 8

Answer 5

7

@JackHumphries La altura solo es necesaria si desea alinear el centro de la página tanto en el eje vertical como en el horizontal. Si lo único que desea es horizontal, puede omitir la altura.

MildWolfie

Answer 6

36

Puedes probar:

body{ margin:0 auto; }

arniotaki
fuente

1

Esta es una respuesta tan simple pero la forma más limpia y eficiente de centrar la etiqueta del cuerpo en el medio de la página.

justinhartman

1

Si bien es corto, tampoco funciona en IE, Edge Legacy, Edge, Chrome ni Firefox. El problema es que el margen automático solo funciona cuando el ancho del elemento es menor que el del padre. Como 'cuerpo' está predeterminado al 100%, no hay espacio en los bordes para insertar automáticamente los márgenes. Puede usar body { margin:0 auto; max-width: 700px; }y luego su cuerpo tendrá hasta 700px y permitirá envolver dispositivos más pequeños.

user3347790

Answer 7

1

Esta es una respuesta tan simple pero la forma más limpia y eficiente de centrar la etiqueta del cuerpo en el medio de la página.

justinhartman

Answer 8

1

Si bien es corto, tampoco funciona en IE, Edge Legacy, Edge, Chrome ni Firefox. El problema es que el margen automático solo funciona cuando el ancho del elemento es menor que el del padre. Como 'cuerpo' está predeterminado al 100%, no hay espacio en los bordes para insertar automáticamente los márgenes. Puede usar body { margin:0 auto; max-width: 700px; }y luego su cuerpo tendrá hasta 700px y permitirá envolver dispositivos más pequeños.

user3347790

Answer 9

17

EDITAR

A partir de hoy con flexbox, podría

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

RESPUESTA ANTERIOR

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

Abernier
fuente

1

¿Qué DOCTYPE permite el styleatributo de la htmlentidad?

hasta el

1

@ceving: no estoy seguro de entender ... ¿significa que no es CSS válido?

Abernier

Answer 10

1

¿Qué DOCTYPE permite el styleatributo de la htmlentidad?

hasta el

Answer 11

1

@ceving: no estoy seguro de entender ... ¿significa que no es CSS válido?

Abernier

Answer 12

Si tengo algo que me encanta compartir con respecto a CSS, es MI MANERA FAVORITA DE CENTRAR LAS COSAS EN AMBOS EJES !!!

Ventajas de este método :

Total compatibilidad con los navegadores que la gente usa realmente
No se requieren tablas
Altamente reutilizable para centrar cualquier otro elemento dentro de su padre
¡Se adapta a padres e hijos con dimensiones dinámicas (cambiantes)!

Siempre hago esto usando 2 clases: una para especificar el elemento padre, cuyo contenido estará centrado ( .centered-wrapper), y la segunda para especificar qué hijo del padre está centrado ( .centered-content). Esta segunda clase es útil en el caso de que el padre tenga varios hijos, pero solo uno debe estar centrado). En este caso, bodyserá el .centered-wrapper, y un interno divserá .centered-content.

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

La idea para centrar ahora será hacer .centered-contentun inline-block. Esto facilitará fácilmente el centrado horizontal, a través text-align: center;y también permitirá el centrado vertical como verá.

.centered-wrapper {
    position: relative;
    text-align: center;
}
.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
.centered-content {
    display: inline-block;
    vertical-align: middle;
}

¡Esto le brinda 2 clases realmente reutilizables para centrar a cualquier niño dentro de cualquier padre! Solo agregue las clases .centered-wrappery .centered-content.

Entonces, ¿qué pasa con ese :beforeelemento? Facilita vertical-align: middle;y es necesario porque la alineación vertical no es relativa a la altura del padre, la alineación vertical es relativa a la altura del hermano más alto. . Por lo tanto, al asegurarnos de que haya un hermano cuya altura sea la altura del padre (100% de altura, 0 de ancho para hacerlo invisible), sabemos que la alineación vertical será con respecto a la altura del padre.

Una última cosa: debe asegurarse de que sus etiquetas htmly bodysean del tamaño de la ventana para que centrarse en ellas sea lo mismo que centrarse en el navegador.

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

Violín: https://jsfiddle.net/gershy/g121g72a/

Answer 13

8

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0; 
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Jantimon
fuente

¿Cuál es el propósito de 0pxal final, en lugar de auto?

Don Cheadle

Answer 14

¿Cuál es el propósito de 0pxal final, en lugar de auto?

Don Cheadle

Answer 15

Yo uso flexbox encendido html. Para un efecto agradable, puede hacer coincidir el cromo de los navegadores para enmarcar su contenido en tamaños de pantalla más grandes que los máximos de su página. Encuentro que #eeeeeeencaja bastante bien. Podría agregar una sombra de caja para un bonito efecto de flotación.

    html{
        display: flex;
        flex-flow: row nowrap;  
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

imagen / datos cortesía de StatCounter

Answer 16

4

Buena respuesta moderna. Solo algunos comentarios. (a) El prefijo de proveedor para box-shadowprobablemente sea redundante ya que los navegadores que admiten flextambién admiten box-shadow. (b) Hay mucho CSS que embellece tu respuesta, pero hace que las partes importantes sean difíciles de distinguir. Gracias

Manngo

Answer 17

Mucho (b), en el comentario de @ Manngo arriba.

cjauvin

Answer 18

Buena respuesta. Moderno. Pero podría haber sido uno más sencillo con el mismo contenido.

carloswm85

Answer 19

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

Simplemente aplique este estilo antes de aplicar cualquier CSS. Puede cambiar el ancho según sus necesidades.

Answer 20

4

Solo escribe

<body>
   <center>
            *Your Code Here*
   </center></body>

iceNerd
fuente

2

La forma más fácil y sencilla de hacerlo.

Shaeed

2

La etiqueta central está obsoleta: stackoverflow.com/questions/1798817/…

kyczawon

Answer 21

2