javascript - Pourquoi margin:auto auto ne peut-il pas être aligné vers le haut, le bas, la gauche et la droite?

Question

Il n'y a qu'un seul p dans un html.

<p class="test">
</p>

css1:

.test{
    width:200px;
    height:200px;
    border:1px solid red;
    margin:0 auto;
    }

css1 peut centrer p.test à gauche et à droite.

css2 :

.test{
    width:200px;
    height:200px;
    border:1px solid red;
    margin:auto auto;
    } 

为何css2不可以使p.test上下左右居中？？ 
请不要回答如何使他p.test上下左右居中，请回答为何margin:auto auto;不能上下左右居中？？ 

Answer 1

Les contraintes suivantes doivent être valables parmi les valeurs utilisées des autres propriétés :

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = largeur du bloc contenant

Si « marge-gauche » et « marge-droite » sont « auto », leurs valeurs utilisées sont égales. Cela centre horizontalement l'élément par rapport aux bords du bloc conteneur.

下面是关于高度的：

Si 'margin-top' ou 'margin-bottom' sont 'auto', leur valeur utilisée est 0. Si 'height' est 'auto', la hauteur dépend si l'élément a des enfants au niveau du bloc et si il a un rembourrage ou des bordures :

因为规范就是这么规定的算法，浏览器就是这么实现的。

• CSS规范

Answer 2

C'est une bonne question. Laissez-moi vous demander : lorsqu'il y a deux éléments alignés, pouvez-vous les centrer à gauche et à droite ? De la même manière, lorsqu'il peut y avoir des éléments au-dessus et en dessous de vous, comment voulez-vous que le navigateur calcule la position où doit exister l'élément correspondant ?

Answer 3

Non, si vous n'utilisez pas la disposition flexible pour l'alignement haut et bas, il n'y a pas de bonne solution. Virtical-align n’est pas non plus facile à utiliser !

Answer 4

Non, si vous souhaitez centrer le haut, le bas, la gauche et la droite, il est recommandé d'utiliser une disposition flexible, suivie d'un tableau, d'une cellule de tableau ou d'un positionnement