¿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;
}