Pourquoi « margin : auto auto ; » ne centre-t-il pas verticalement une division ?

Alignement vertical d'un Div avec margin:auto

While margin: 0 auto; peut centrer un div horizontalement, margin : auto auto ; ne l'aligne pas verticalement comme prévu. De plus, alignez verticalement : milieu ; est inefficace pour les éléments au niveau du bloc.

Pourquoi les marges automatiques verticales échouent

• margin-top: auto et margin-bottom: auto calculer à zéro, sans effet de centrage.
• marge-haut : -50 % calcule sa valeur par rapport à la largeur du bloc conteneur, et non à sa hauteur.

Solution de contournement utilisant des éléments imbriqués

Une solution de contournement viable consiste à imbriquer trois éléments :

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    position: absolute;
    top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    position: relative;
    top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div>

Dans cette solution :

• L'extérieur L'élément .container établit une structure semblable à un tableau.
• L'élément .helper place le contenu au milieu vertical.
• Le div .content est positionné dans .helper et peut être centré horizontalement avec une marge. : 0 auto;.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!