Jak wyśrodkować elementy w pionie i poziomie w Flexbox
Poniżej znajdują się dwa ogólne rozwiązania centrowania.
Jeden dla elementów elastycznych wyrównanych w pionie ( flex-direction: column
), a drugi dla elementów elastycznych wyrównanych w poziomie ( flex-direction: row
).
W obu przypadkach wysokość wyśrodkowanych div może być zmienna, niezdefiniowana, nieznana, cokolwiek. Wysokość wyśrodkowanych div nie ma znaczenia.
Oto kod HTML dla obu:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (z wyłączeniem stylów dekoracyjnych)
Gdy elementy elastyczne są ułożone pionowo:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
PRÓBNY
Gdy elementy elastyczne są ułożone poziomo:
Dostosuj flex-direction
regułę z powyższego kodu.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
PRÓBNY
Centrowanie zawartości elementów elastycznych
Zakres kontekstu formatowania elastycznego jest ograniczony do relacji rodzic-dziecko. Potomkowie kontenera elastycznego poza dziećmi nie uczestniczą w układzie flex i będą ignorować właściwości flex. Zasadniczo właściwości flex nie są dziedziczone poza dziećmi.
Stąd, zawsze trzeba stosować display: flex
albo display: inline-flex
do elementu nadrzędnego w celu zastosowania właściwości Flex dziecka.
Aby wyśrodkować tekst w pionie i / lub w poziomie lub inną zawartość zawartą w elemencie flex, ustaw element jako (zagnieżdżony) kontener flex i powtórz reguły centrowania.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Więcej informacji tutaj: Jak wyrównać tekst pionowo w flexbox?
Alternatywnie można zastosować margin: auto
do elementu treści elementu flex.
p { margin: auto; }
Dowiedz się więcej o auto
marginesach elastyczności tutaj: Metody wyrównywania elementów elastycznych (patrz ramka # 56).
Centrowanie wielu linii elementów elastycznych
Gdy elastyczny kontener ma wiele linii (z powodu zawijania), align-content
właściwość będzie konieczna do wyrównania osi.
Ze specyfikacji:
8.4 Pakowanie Flex Lines: align-content
właściwość
align-content
Nieruchomość wyrównuje linie flex kontenera wewnątrz elastycznego pojemnika, gdy jest dodatkowa przestrzeń w przekroju osi, podobny do tego, jak justify-content
wyrównuje poszczególnych elementów w głównej osi.
Uwaga: ta właściwość nie ma wpływu na jednowierszowy elastyczny kontener.
Więcej informacji tutaj: Jak flex-wrap działa z align-self, align-items i align-content?
Obsługa przeglądarki
Flexbox jest obsługiwany przez wszystkie główne przeglądarki, z wyjątkiem IE <10 . Niektóre najnowsze wersje przeglądarek, takie jak Safari 8 i IE10, wymagają prefiksów dostawców . Aby szybko dodać prefiksy, skorzystaj z Autoprefixera . Więcej szczegółów w tej odpowiedzi .
Rozwiązanie centrujące dla starszych przeglądarek
Aby znaleźć alternatywne rozwiązanie centrowania wykorzystujące właściwości tabeli CSS i właściwości pozycjonowania, zobacz tę odpowiedź: https://stackoverflow.com/a/31977476/3597276