Ako vycentrovať čokoľvek pomocou CSS - zarovnajte div, text a ďalšie

Centrovanie vecí je jedným z najťažších aspektov CSS.

Samotné metódy zvyčajne nie je ťažké pochopiť. Namiesto toho je to skôr tým, že existuje toľko spôsobov, ako veci sústrediť.

Metóda, ktorú použijete, sa môže líšiť v závislosti od prvku HTML, ktorý sa snažíte vycentrovať, alebo od toho, či ho centrujete horizontálne alebo vertikálne.

V tomto výučbe si ukážeme, ako vycentrovať rôzne prvky horizontálne, vertikálne a vertikálne aj horizontálne.

Ako vycentrovať vodorovne

Centrovanie prvkov horizontálne je vo všeobecnosti jednoduchšie ako vertikálne centrovanie. Tu uvádzame niektoré bežné prvky, ktoré možno budete chcieť vycentrovať vodorovne a rôzne spôsoby, ako to urobiť.

Ako vycentrovať text pomocou vlastnosti CSS Zarovnanie textu na stred

Na vodorovné vycentrovanie textu alebo odkazov stačí použiť text-alignvlastnosť s hodnotou center:

Hello, (centered) World!

p { text-align: center; }

Ako vycentrovať div pomocou CSS Margin Auto

Pomocou vlastnosti skratky margins hodnotou 0 autovycentrujte prvky na úrovni bloku ako divvodorovne:

.child { ... margin: 0 auto; }

Ako vycentrovať div na horizontálne pomocou Flexboxu

Flexbox je najmodernejší spôsob, ako sústrediť veci na stránku, a umožňuje navrhovanie responzívnych rozložení oveľa jednoduchšie, ako to bolo predtým. Nie je to však úplne podporované v niektorých starších prehliadačoch, ako je napríklad Internet Explorer.

Ak chcete prvok vodorovne vycentrovať pomocou Flexboxu, jednoducho použite display: flexa justify-content: centerna nadradený prvok:

.container { ... display: flex; justify-content: center; }

Ako vycentrovať vertikálne

Centrovanie prvkov vertikálne bez moderných metód, ako je Flexbox, môže byť skutočnou prácou. Tu si prejdeme niektoré zo starších metód, aby sme najskôr centrovali veci vertikálne, potom si ukážeme, ako to urobiť s Flexboxom.

Ako vertikálne vycentrovať div s CSS s absolútnym umiestnením a negatívnymi okrajmi

Dlhý čas to bola cesta, ako veci centrovať vertikálne. Pri tejto metóde musíte poznať výšku prvku, ktorý chcete vycentrovať.

Najskôr nastavte displayvlastnosť nadradeného prvku na relative.

Potom pre podradený prvok nastavte displayvlastnosť na absolutea topna 50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

Ale to je v skutočnosti iba vertikálne vycentrovanie horného okraja podradeného prvku.

Ak chcete skutočne vycentrovať podradený prvok, nastavte margin-topvlastnosť na -(half the child element's height):

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

Ako vycentrovať div na vertikálne pomocou transformácie a prekladu

Ak nepoznáte výšku prvku, ktorý chcete vycentrovať (alebo dokonca ani náhodou), je táto metóda šikovným trikom.

Táto metóda je veľmi podobná vyššie použitej metóde negatívnych marží. Nastaviť displayvlastnosť nadradeného prvku na relative.

Pre podradený prvok nastavte displayvlastnosť na absolutea nastavte topna 50%. Teraz namiesto použitia zápornej marže na skutočné vycentrovanie podradeného prvku stačí použiť transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

Všimnite si, že translate(0, -50%)je to skratka pre translateX(0)a translateY(-50%). Môžete tiež písať, transform: translateY(-50%)aby ste podriadený prvok vycentrovali zvisle.

Ako vycentrovať div na zvisle pomocou Flexboxu

Rovnako ako vodorovné centrovanie vecí, aj vďaka systému Flexbox je super ľahké vycentrovať veci vertikálne.

Ak chcete prvok vycentrovať vertikálne, použite ikonu display: flexa align-items: centerna nadradený prvok:

.container { ... display: flex; align-items: center; }

Ako vycentrovať vertikálne aj horizontálne

Ako vycentrovať bod vertikálne a horizontálne pomocou absolútneho umiestnenia CSS a negatívnych okrajov

Je to veľmi podobné vyššie uvedenej metóde na centrovanie prvku vertikálne. Rovnako ako naposledy musíte poznať šírku a výšku prvku, ktorý chcete vycentrovať.

Nastaviť displayvlastnosť nadradeného prvku na relative.

Potom nastavte displaymajetok dieťaťa na absolute, topdo 50%a leftdo 50%. Týmto sa iba centruje ľavý horný roh podradeného prvku vertikálne a horizontálne.

Ak chcete skutočne vycentrovať podradený prvok, použite záporný horný okraj nastavený na polovicu výšky podriadeného prvku a záporný ľavý okraj nastavený na polovicu šírky podradeného prvku:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

Ako vycentrovať Div vertikálne a horizontálne pomocou transformácie a prekladu

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

.container { ... display: flex; justify-content: center; align-items: center; }

To je všetko, čo potrebujete vedieť, aby ste sa sústredili na to najlepšie z nich. Teraz choďte ďalej a vycentrujte všetky veci.