Dlaczego atrybut automatyczny dla marginesu nie działa pionowo, gdy działa on w poziomie?

Question

Widziałem, że podczas tworzenia stron internetowych, pionowe wycentrowanie kontenera (o ustalonej wysokości) wewnątrz kontenera o losowej wysokości zawsze jest koszmarem dla programisty stron internetowych (przynajmniej mnie), podczas gdy horyzontalne wyśrodkowanie kontenera (o stałej szerokości) w pojemniku o losowej szerokości, margin:0px auto; ma tendencję do łatwego wyjścia w standardowym modelu.
Kiedy wszystko może być tak proste, dlaczego CSS nie pracuje z margin:auto 0px;, jeśli chodzi o wyśrodkowanie kontenera o stałej wysokości wewnątrz pojemnika o losowej wysokości? Czy jest jakiś konkretny powód, aby to zrobić? Dzięki za twoje spostrzeżenia z góry.

Answer 1

To naprawdę mniej koszmar niż myślisz, po prostu nie używaj marginesów. vertical-align jest naprawdę tym, na co powinieneś polegać w pionowym centrowaniu na wysokości cieczy. Rzuciłem razem szybki pokaz, aby zademonstrować swój punkt:

HTML:

<span></span><div id="any-height"></div> 

CSS:

* { margin: 0; padding: 0; } 
html, body { 
    height: 100%; 
    text-align: center; } 
span { 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; } 
#any-height { 
    background: #000; 
    text-align: left; 
    width: 200px; 
    height: 200px; 
    vertical-align: middle; 
    display: inline-block; } 

zobacz: http://jsfiddle.net/Wexcode/jLXMS/

Answer 2

Prawidłowa odpowiedź na Twoje pytanie jest to, że margin: auto 0 robi działa tak samo, jak margin: 0 auto działa, ponieważ width: auto nie działa w ten sam sposób, co height: auto es.

Pionowy automatyczny margines działa dla elementów pozycjonowanych absolutnie o znanej wysokości.

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    width: 150px; 
    height: 150px; 
    margin: auto; 
} 

Answer 3

css ----------------

.aligncenter{ 
     display: -webkit-box; 
     display: -moz-box; 
     display: box; 
     -webkit-box-align: center; 
     -moz-box-align: center; 
     flex-align: center; 
     -webkit-box-pack: center; 
     -moz-box-pack: center; 
     flex-pack: center; 
} 

html ------------------ -------

<div class="aligncenter">

---your content appear at the middle of the parent div----

</div>

uwaga ----------- ta klasa css działa z prawie wszystkimi przeglądarkami