Comment centrer l'ensemble du corps HTML ?

Question

Comment puis-je aligner tout le corps du html au centre ?

Answer 1

J'utilise flexbox sur html. Pour un bel effet, vous pouvez assortir les navigateurs chrome pour encadrer votre contenu sur des tailles d'écran plus grandes que vos maximums de page. Je trouve que #eeeeee s'accorde assez bien. Vous pourriez ajouter une ombre de boîte pour un bel effet flottant.

    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;
        /*recommander 1920 / 1080 max sur la base des statistiques d'utilisation, utiliser 100% jusqu'à ce 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);
    }

image/données courtoisie de StatCounter

Answer 2

Écrivez simplement

            *Votre code ici*

Answer 3

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

Answer 4

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

Il suffit d'appliquer ce style avant d'appliquer tout CSS. Vous pouvez modifier la largeur selon vos besoins.

Answer 5

Que diriez-vous de ceci :

• si width: 60%, alors margin-left: (1-60%)/2 = 20%;
• si height: 50%, alors margin-top: (1-50%)/2=25%;

De même pour margin-bottom et margin-right;

        html {
            height: 100%;
        }

        body {
            width: 60%;
            height: 50%;
            margin: 25% 20% 25% 20%;
            border: 1px solid;
        }