Różnica między metodami centrowania CSS. Co jest lepsze? [zamknięty] - css, html5, css3

Zastanawiam się obecnie, jaka jest różnica między następującymi metodami centrowania „opakowania” w CSS.

Metoda 1:

#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
}

Metoda 2:

#wrapper {
width: 960px;
position: relative;
margin: 0 auto -4em;

min-height: 100%;
height: auto !important;
height: 100%;
}

Z tego, co widzę w niektórych moich poprzednich projektach, dają ten sam efekt. „Metoda 2” to coś, co znalazłem na wideo z YouTube, podczas gdy „Metoda 1” pochodzi z tego, czego się wcześniej nauczyłem.

Po prostu chcę wiedzieć, co jest lepsze, jeśli to możliwe. Chociaż nie brałbym pod uwagę nowych metod! Wszystko, co może pomóc, wezmę. Dziękuję za przeczytanie!

Odpowiedzi:

1 dla odpowiedzi № 1

Metoda 1 byłaby preferowaną metodą, ale aby ją dostosować, należy ją wykonać

width:100%;
max-width:960px;

---

1 dla odpowiedzi nr 2

margin: 0 auto;

jest skrótem dla

margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;

Twój drugi przykład jest równy

margin-top: 0;
margin-bottom: -4em;
margin-right: auto;
margin-left: auto;

, więc jest to nie tak samo jak twój pierwszy przykład (chyba że byłby dziedziczony) margin-bottom z -4em

Ale oba wyśrodkują element bloku. Jednakże bottom-margin: -4em spowoduje, że kolejne elementy nałożą się na ten element o 4 ...

Uwaga: Wszystko to dotyczy tylko centrowania poziomego. Jest Nie centrowanie pionowe w obu metodach.

---