Horizontální a vertikální vyrovnání prvků. Zarovnání na střed: rozložení CSS

Existuje několik zásadně odlišných způsobů, jak svisle vycentrovat objekt pomocí CSS, ale vybrat ten správný může být složité. Na některé z nich se podíváme a na základě získaných znalostí také vytvoříme malý web.

Vertikální zarovnání na střed pomocí CSS není tak snadné dosáhnout. Existuje mnoho způsobů a ne všechny fungují ve všech prohlížečích. Pojďme se podívat na 5 různých metod a na výhody a nevýhody každé z nich. Příklad.

1. způsob

Tato metoda předpokládá, že nastavujeme nějaký prvek

způsob zobrazení jako tabulku, poté v ní můžeme použít vlastnost vertical-align (která na různých prvcích funguje odlišně).

Některé užitečné informace, které by měly být vycentrovány.

#wrapper( display: table; ) #cell( display: table-cell; vertical-align: middle; )

klady

Obsah může dynamicky měnit výšku (výška není definována v CSS).
Obsah není zkrácen, pokud pro něj není dostatek místa.

Mínusy

Nefunguje v IE 7 a nižších
Spousta vnořených značek

2. způsob

Tato metoda využívá absolutní umístění prvku div , který má horní okraj nastaven na 50 % a horní okraj (margin-top) mínus polovinu výšky obsahu. To znamená, že objekt musí mít pevnou výšku, která je definována ve stylech CSS.

Jelikož je výška pevná, můžete nastavit overflow:auto; pro div obsahující obsah, takže pokud se obsah nevejde, zobrazí se posuvníky.

Obsah zde

#content ( pozice: absolutní; nahoře: 50 %; výška: 240 pixelů; margin-top: -120 pixelů; /* mínus polovina výšky */ )

klady

Funguje ve všech prohlížečích.
Žádné další investice.

Mínusy

Když není dostatek místa, obsah zmizí (např. div je uvnitř těla a uživatel zmenší okna, v takovém případě se posuvníky nezobrazí.

3. způsob

Při této metodě obalíme obsahový div jiným div. Nastavte jeho výšku na 50 % (výška: 50 %;) a spodní okraj na polovinu výšky (margin-bottom:-contenttheight;). Obsah se uvolní a bude vycentrován.

zde obsah

#floater( float: left; height: 50%; margin-bottom: -120px; ) #content( clear: both; height: 240px; position: relativní; )

klady

Funguje ve všech prohlížečích.
Při nedostatku místa (například při zmenšení okna) není obsah oříznut, objeví se posuvníky.

Mínusy

Myslím, že jediné: že je použit další prázdný prvek.

4. metoda.

Tato metoda používá vlastnost position:absolute; pro divy s pevnými rozměry (šířka a výška). Poté nastavíme jeho souřadnice top:0; dole:0; , ale protože má pevnou výšku, nemůže se natáhnout a je vycentrovaný. To je velmi podobné známé metodě horizontálního centrování prvku na úrovni bloku s pevnou šířkou (margin: 0 auto;).

Důležitá informace.

#content( pozice: absolutní; nahoře: 0; dole: 0; vlevo: 0; vpravo: 0; okraj: auto; výška: 240px; šířka: 70 %; )

klady

Velmi jednoduché.

Mínusy

Nefunguje v Internet Exploreru
Pokud v kontejneru není dostatek místa, obsah bude oříznut bez posuvníků.

5. metoda

Tuto metodu můžete použít k vystředění jednoho řádku textu. Stačí nastavit výšku textu (line-height) na výšku prvku (height). Poté se čára zobrazí uprostřed.

Nějaký řádek textu

#content( height: 100px; line-height: 100px; )

klady

Funguje ve všech prohlížečích.
Neořízne text, pokud se nevejde.

Mínusy

Funguje pouze s textem (nepracuje s prvky bloku).
Pokud je tam více než jeden řádek textu, vypadá to velmi špatně.

Tato metoda je velmi užitečná pro malé prvky, jako je centrování textu v tlačítku nebo textovém poli.

Nyní, když víte, jak dosáhnout vertikálního zarovnání na střed, pojďme vytvořit jednoduchý web, který bude nakonec vypadat takto:

Krok 1

Vždy je dobré začít sémantickým značením. Naše stránka bude strukturována takto:

#floater (pro vystředění obsahu)
#centred (středový prvek)
- #boční
  - #logo
  - #nav (seznam
  - #obsah
- #bottom (pro autorská práva a vše)
Napišme následující html označení:
Společnost zaměřená na střed
Společnost
- Domov
- produkty
- Blog
- Kontakt
- O
Název stránky

Holisticky přepracujte outsourcing s přidanou hodnotou po spolupráci zaměřené na procesy a sdílení nápadů. Energeticky zjednodušte efektní mezery na trhu prostřednictvím povolených imperativů. Holisticky převládejte prémiové inovace po přesvědčivých scénářích. Bezproblémově rekapitulujte vysoké standardy lidského kapitálu pomocí špičkových vyráběných produktů. Výrazně syndikujte schémata vyhovující standardům před robustními vortály. Jedinečně rekapitulujte využitou připravenost webu vis-a-vis předem připraveným informacím.

Nadpis 2

Efektivně přijměte přizpůsobenou webovou připravenost spíše než procesy řízené zákazníky. Asertivně zvyšujte požadavky napříč platformami ve vztahu k proaktivním technologiím. Pohodlně posilujte multidisciplinární metaslužby bez celopodnikových rozhraní. Pohodlně zefektivněte konkurenční strategické tematické oblasti pomocí zaměřených elektronických trhů. Fosfluorescenčně syndikujte komunity světové třídy vis-a-vis s trhy s přidanou hodnotou. Vhodně znovu objevte holistické služby před robustními elektronickými službami.
Upozornění na autorská práva je zde

Krok 2

Nyní napíšeme nejjednodušší CSS pro umístění prvků na stránku. Tento kód byste měli uložit do souboru style.css. Právě na něm je odkaz zapsán v html souboru.
Html, tělo ( okraj: 0; odsazení: 0; výška: 100 %; ) tělo ( pozadí: url("page_bg.jpg") 50 % 50 % bez opakování #FC3; rodina písem: Georgia, Times, patky; ) #floater ( pozice: relativní; plovoucí: vlevo; výška: 50 %; margin-bottom: -200px; width: 1px; ) #centered ( pozice: relativní; jasná: vlevo; výška: 400px; šířka: 80 %; max. -width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; ) #bottom ( position: absolute; bottom: 0; right: 0; ) #nav ( position: absolutní; vlevo: 0; nahoře: 0; dole: 0; vpravo: 70 %; odsazení: 20 pixelů; okraj: 10 pixelů; ) #content ( pozice: absolutní; vlevo: 30 %; vpravo: 0; nahoře: 0; dole: 0; přetečení: auto; výška: 340px; odsazení: 20px; okraj: 10px; )
Než budeme moci obsah zarovnat na střed, musíme nastavit výšku těla a html na 100 %. Vzhledem k tomu, že výška je uvažována bez vnitřní a vnější výplně (výplň a okraj), nastavíme je (výplň) na 0, aby nebyly žádné posuvníky.

Spodní výplň pro prvek „floater“ je mínus polovina výšky obsahu (400px), konkrétně -200px ;

Vaše stránka by nyní měla vypadat nějak takto:

Šířka prvku #centered je 80 %. Díky tomu je náš web užší na malých obrazovkách a širší na větších. většina stránek vypadá na nových širokých monitorech v levém horním rohu ošklivě. Vlastnosti min-width a max-width také omezují naši stránku, aby nevypadala příliš široká nebo příliš úzká. Internet Explorer tyto vlastnosti nepodporuje. Musí být nastavena na pevnou šířku.

Protože prvek #centered je nastaven na position:relative , můžeme použít absolutní umístění prvků v něm. Poté nastavte overflow:auto; pro prvek #content, aby se zobrazily posuvníky, pokud se tam nevejde žádný obsah.

Krok 3

A poslední věc, kterou uděláme, je přidat nějaký styl, aby stránka vypadala trochu atraktivněji. Začněme jídelníčkem.
#nav ul ( styl seznamu: žádný; odsazení: 0; okraj: 20px 0 0 0; odsazení textu: 0; ) #nav li ( odsazení: 0; okraj: 3px; ) #nav li a ( zobrazení: blok; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; ) #nav li a::after ( obsah: """; barva: #aaa; váha písma: tučné; zobrazení: vložené; plovoucí: vpravo; okraj: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( pozadí: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )
První věc, kterou jsme udělali, aby menu vypadalo lépe, bylo odstranění odrážek nastavením atributu list-style:none a také nastavení paddingu a paddingu, protože výchozí hodnoty se mezi prohlížeči značně liší.

Všimněte si, že jsme pak určili, že odkazy by měly být vykresleny jako prvky na úrovni bloku. Nyní jsou při zobrazení roztaženy přes celou šířku prvku, ve kterém se nacházejí.

Další zajímavou věcí, kterou jsme použili pro menu, jsou pseudotřídy :before a :after. Umožňují vám přidat něco před a za prvek. Je to dobrý způsob, jak přidat ikony nebo symboly, jako je šipka na konec každého odkazu. Tento trik nefunguje v aplikaci Internet Explorer 7 a nižší.

Krok 4

A v neposlední řadě do našeho designu přidáme nějaké závoje pro ještě větší krásu.
#centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( rodina písem: Helvetica, Arial, sans- patka; váha písma: normální; barva: #666; ) h1 ( barva: #f93; okraj-dolní: 1px plný #ddd; mezera mezi písmeny: -0,05em; váha písma: tučné; horní okraj: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0,7em; color: #f03; ) #logo (font-size: 2em; text-align: center; color: #999; ) #logo silné ( font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) a ( barva: #f03; )
V těchto stylech jsme prvku #centered nastavili zaoblené rohy. V CSS3 to bude řešit vlastnost border-radius. Toto ještě není implementováno některými prohlížeči, kromě použití předpon -moz a -webkit pro Mozilla Firefox a Safari/Webkit.

Kompatibilita

Jak jste možná uhodli, hlavním zdrojem problémů s kompatibilitou je Internet Explorer:
- Prvek #floater musí být nastaven na šířku
- Další vycpávky kolem nabídek v IE 6
235881 zobrazení

Obecně platí, že centrování prvků HTML na stránce není obtížný úkol. V některých případech... si weboví vývojáři musí dát hlavu do hlavy, aby našli to nejlepší řešení.

Centrovat prvky horizontálně není tak těžké, vertikálně už vyvolává otázky, ale jejich kombinování obecně může být matoucí. V éře responzivního designu málokdy známe přesné rozměry určitých prvků. Napočítal jsem 6 různých způsobů centrování prvků pomocí CSS. Začněme jednoduchými příklady a skončeme složitějšími. Bude fungovat se stejným HTML kódem:

Horizontální centrování se zarovnáním textu

Někdy je to nejjednodušší řešení nejlepší:

Div.center ( zarovnání textu: na střed; pozadí: hsl(0, 100 %, 97 %); ) div.center img ( šířka: 33 %; výška: auto; )

Není zde žádné vertikální centrování: k tomu budete muset přidat vlastnost margin-top a margin-bottom do prvku div.

Centrování s okrajem: auto

Další řešení pro horizontální centrování:

Div.center ( pozadí: hsl(60, 100 %, 97 %); ) div.center img ( displej: blok; šířka: 33 %; výška: auto; okraj: 0 auto; )

Všimněte si, že pro tuto metodu musíte nastavit vlastnost display: block.

Centrování s buňkou stolu

Pomocí display: table-cell zajistíme, aby byl prvek vycentrován jak svisle, tak vodorovně. Zde ale musíme obrázek vnořit do jiného prvku div.

Zarovnáno na střed ( display: table; background: hsl(120, 100%, 97%); width: 100%; ) .center-core ( display: table-cell; text-align: center; vertical-align: middle; ) .center-core img ( šířka: 33 %; výška: auto; )

Aby vše fungovalo správně, je třeba nastavit div na šířku: 100 %. Pro vertikální vystředění prvku použijeme standardní metody nastavením výšky. Funguje všude, včetně IE8+.

Absolutní centrování

Velmi zajímavé řešení. Spočívá v tom, že musíte nastavit výšku vnější nádoby:

Absolute-aligned ( position: relativní; min-height: 500px; background: hsl(200, 100%, 97%); ) .absolute-aligned img ( width: 50%; min-width: 200px; height: auto; overflow : auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Centrování s překladem

Nové řešení, kde se používají transformace CSS. Poskytuje horizontální i vertikální centrování:

Center ( background: hsl(180, 100%, 97%); position: relativní; min-height: 500px; ) .center img ( position: absolute; top: 50%; left: 50%; transform: translate(-50) %, -50 %); šířka: 30 %; výška: auto; )

Existuje několik nevýhod:
- Vlastnost transformace CSS vyžaduje předpony prohlížeče
- Nefunguje ve starších verzích IE (8 a nižších)
- Vnější nádobě je třeba dát výšku.
- Pokud je uvnitř kontejneru text, může být trochu rozmazaný.
Centrování s flex zobrazením displeje

Asi nejjednodušší varianta.

Center ( background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; ) .center img ( width: 30%; height: auto; )

Nefunguje ve všech verzích IE (ačkoli můžete být na bezpečné straně, když navíc použijete display: table-cell). Kompletní CSS:

Center ( pozadí: hsl(240, 100 %, 97 %); displej: -webkit-box; /* Safari, iOS 6 a starší; Android, starší WebKit */ displej: -moz-box; /* Firefox (může a selhání) */ displej: -ms-flexbox; /* IE 10 */ displej: -webkit-flex; /* Chrome 21+ */ displej: flex; /* Opera 12.1+, Firefox 22+ */ -webkit- box -align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz - box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; )

Centrování pomocí calc

V některých případech je tato metoda univerzálnější než použití flexboxu:

Střed ( pozadí: hsl(300, 100 %, 97 %); min-výška: 600px; pozice: relativní; ) .center img ( šířka: 40 %; výška: auto; pozice: absolutní; nahoře: calc (50 % -) 20 %); vlevo: calc (50 % - 20 %); )

Je to velmi jednoduché, můžeme si vypočítat rozměry, které potřebujeme v závislosti na celém rozložení stránky. Výpočty jsou velmi jednoduché, 50 % je středový bod kontejneru, ale naším úkolem je umístit levý horní roh obrázku na tyto souřadnice. Dále odečtěte polovinu výšky a šířky obrázku. Vzorec je:

Nahoře: calc(50% - (40%/2)); vlevo: calc(50% - (40%/2));

V praxi můžete zjistit, že tato metoda funguje dobře, pokud známe rozměry prvků:

Center img ( šířka: 500px; výška: 500px; pozice: absolutní; top:calc(50% - (300px / 2)); vlevo: calc(50% - (300px - 2)); )

Tuto metodu podporuje Firefox, od verze 4 budete muset zaregistrovat předpony prohlížeče. Nefunguje v IE 8. Celý kód:

Střed img ( šířka: 40 %; výška: auto; pozice: absolutní; nahoře: -webkit-calc(50% - 20%); vlevo: -webkit-calc(50% - 20%); nahoře: -moz-calc (50 % - 20 %); vlevo: -moz-calc (50 % - 20 %); nahoře: calc (50 % - 20 %); vlevo: calc (50 % - 20 %); )

Doufám, že tyto metody vám postačí k tomu, abyste pro sebe našli to nejlepší řešení.
css,
HTML

Myslím, že mnozí z vás, kteří se zabývali rozvržením, se setkali s potřebou zarovnat prvky svisle a ví, jaké potíže vznikají při zarovnání prvku na střed.

Ano, pro vertikální zarovnání v CSS existuje speciální vlastnost vertical-align s mnoha hodnotami. V praxi to však nefunguje podle očekávání. Zkusme na to přijít.

Porovnejme následující přístupy. Zarovnání s:

stoly,
odsazení,
výška čáry,
protahování,
záporná marže,
přeměnit ,
pseudo prvek
flexbox.

Existují dva prvky div, přičemž jeden je vnořen do druhého. Dejme jim příslušné třídy – vnější a vnitřní .

Pro začátek zvažte případ, kdy jsou velikosti vnějšího a vnitřního bloku známý. Přidejme display: inline-block k vnitřnímu prvku a text-align: center a vertical-align: middle k vnějšímu prvku.

Pamatujte, že zarovnání se vztahuje pouze na prvky, které mají režim zobrazení inline nebo inline-block.

Nastavíme velikosti bloků a také barvy pozadí, abychom viděli jejich okraje.

Vnější ( šířka: 200px; výška: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc ;)
Po použití stylů uvidíme, že vnitřní blok je zarovnán vodorovně, ale ne svisle:
http://jsfiddle.net/c1bgfffq/

Proč se to stalo? Faktem je, že vlastnost vertical-align ovlivňuje zarovnání prvek samotný, nikoli jeho obsah(kromě případů, kdy je aplikován na buňky tabulky). Použití této vlastnosti na vnější prvek tedy neudělalo nic. Navíc aplikace této vlastnosti na vnitřní prvek také nic neudělá, protože vložené bloky jsou svisle zarovnány se sousedními bloky a v našem případě máme jeden vložený blok.

Existuje několik technik, jak tento problém vyřešit. Podívejme se níže na každý z nich blíže.

Zarovnání s tabulkou

Zjevnou nevýhodou tohoto řešení je, že z hlediska sémantiky je chybné používat k zarovnání tabulky. Druhou nevýhodou je, že pro vytvoření tabulky je potřeba přidat kolem vnějšího bloku ještě jeden prvek.

První mínus lze částečně odstranit nahrazením tagů table a td div a nastavením režimu zobrazení tabulky v CSS.

Zarovnání s vycpávkou

Vnější ( výška: 200px; ) .vnitřní (výška: 100px; okraj: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nevýhodou řešení je, že je použitelné pouze v omezeném počtu případů, kdy jsou známé výšky obou bloků.

Zarovnání s výškou čáry

Vnější ( výška: 200px; výška řádku: 200px; ) .vnitřní ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/

Tuto techniku lze také použít k zarovnání víceřádkového textu, pokud přepíšete hodnotu výšky řádku pro vnitřní blok a přidáte zobrazení pravidel: inline-block a vertical-align: middle .

Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/

Nevýhodou této metody je, že musí být známa výška vnějšího bloku.

Roztažení zarovnání

K tomu potřebujete:

nastavení relativní polohy k vnějšímu bloku a absolutní polohy k vnitřnímu bloku;
přidejte pravidla top: 0 a bottom: 0 k vnitřnímu bloku, v důsledku čehož se roztáhne na celou výšku vnějšího bloku;
nastavte hodnotu na auto pro vertikální výplň vnitřního bloku.

Podstatou této techniky je, že nastavení výšky pro roztažený a absolutně umístěný blok způsobí, že prohlížeč vypočítá vertikální výplň ve stejných poměrech, pokud je jejich hodnota nastavena na auto.

Zarovnání se záporným okrajem-vrchol

Musíte nastavit vnější blok na relativní umístění a vnitřní blok na absolutní umístění. Potom musíte posunout vnitřní krabici dolů o polovinu výšky horní části vnější krabice: 50 % a posunout ji nahoru o polovinu její vlastní výšky okraj-horní: -H vnitřní / 2.

Vnější ( pozice: relativní; ) .vnitřní ( výška: 100px; pozice: absolutní; nahoře: 50 %; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Nevýhodou této metody je, že musí být známa výška vnitřní jednotky.

Zarovnání s transformací

Vnější ( pozice: relativní; ) .vnitřní ( pozice: absolutní; nahoře: 50 %; transformace: přeložitY(-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Proč v předchozí metodě nebylo možné nastavit hodnotu v procentech? Protože procentuální hodnoty vlastnosti margin jsou relativní k rodičovskému prvku, hodnota 50 % by se rovnala polovině výšky vnějšího rámečku a vnitřní rámeček bychom museli zvednout o polovinu jeho vlastní výšky. Přesně k tomu slouží vlastnost transform.

Nevýhodou této metody je, že ji nelze použít, pokud má vnitřní blok absolutní polohování.

Zarovnání s Flexboxem

Vnější blok musí být nastaven na zobrazení: flex a vnitřní blok musí být nastaven na margin: auto. A to je všechno! Krásné, že?

Vnější ( displej: flex; šířka: 200px; výška: 200px; ) .vnitřní ( šířka: 100px; okraj: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nevýhodou této metody je, že Flexbox podporují pouze moderní prohlížeče.

Jaký způsob zvolit?

Pro vertikální zarovnání textu je lepší použít vertikální odsazení nebo vlastnost line-height.
Pro absolutně umístěné prvky se známou výškou (jako jsou ikony) je ideální přístup záporného okraje.
Pro složitější případy, kdy výška bloku není známa, by se měl použít pseudoelement nebo vlastnost transform.
No, pokud máte to štěstí, že nepotřebujete podporovat starší verze IE, pak je samozřejmě lepší Flexbox.

Velmi často je úkolem zarovnat blok na střed stránky/obrazovky, a to i tak, že bez java skriptu, bez nastavování tvrdých velikostí nebo záporných odsazení, aby posuvníky fungovaly na rodiči, pokud blok svou velikost přesáhne. Na netu je poměrně hodně monotónních příkladů, jak zarovnat blok na střed obrazovky. Většina z nich je zpravidla založena na stejných principech.

Níže jsou uvedeny hlavní způsoby řešení problému, jejich klady a zápory. Pro pochopení podstaty příkladů doporučuji zmenšit výšku / šířku okna Výsledek v příkladech na uvedených odkazech.

Možnost 1. Negativní výplň.

blok

Nadřazený ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; ) .block ( šířka: 250px; výška: 250px; pozice: absolutní; nahoře: 50 %; vlevo : 50 %; okraj: -125 pixelů 0 0 -125 pixelů; img ( max. šířka: 100 %; výška: auto; zobrazení: blok; okraj: 0 auto; ohraničení: žádný; ) )

Možnost 2: Automatické odsazení.

blok

rodič

Nadřazený ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; ) .block ( šířka: 250px; výška: 250px; pozice: absolutní; nahoře: 0; vpravo: 0; dole: 0; vlevo: 0; okraj: auto; img ( max. šířka: 100 %; výška: auto; displej: blok; okraj: 0 auto; okraj: žádný; ) )

Možnost 3. Tabulka.

rodič

blok

Nadřazená položka ( šířka: 100 %; výška: 100 %; zobrazení: tabulka; pozice: absolutní; nahoře: 0; vlevo: 0; > .inner ( display: tabulka-buňka; zarovnání textu: na střed; svislé zarovnání: na střed; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

Chcete-li k tomuto příkladu přidat svitek, budete muset do struktury přidat ještě jeden prvek.
Příklad: jsfiddle.net/serdidg/fk5nqh52/3 .

Možnost 4. Pseudoprvek.

rodič

pseudo prvek

blok

pseudo prvek

rodič

blok

rodič

blok

Nadřazená položka ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; mezera: nowrap; zarovnání textu: na střed; velikost písma: 0; &:před ( výška: 100 %; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left ; img ( display: block; border: none; ) )

Nebo pokud chcete, aby rodič zabíral pouze výšku a šířku okna, nikoli celou stránku:

Rodič ( pozice: pevná; nahoře: 0; vpravo: 0; dole: 0; vlevo: 0; přetečení: auto; mezera: nowrap; zarovnání textu: na střed; velikost písma: 0; &:před ( výška: 100 %; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img ( display: block; border: none; ) )

Možnost 5. Flexbox.

Rodič ( šířka: 100 %; výška: 100 %; poloha: pevná; nahoře: 0; vlevo: 0; zobrazení: flex; zarovnat-položky: na střed; zarovnat-obsah: na střed; zarovnat-obsah: na střed; přetečení: auto; ) .block ( background: #60a839; img ( display: block; border: none; ) )

Možnost 6. Transformace.

Rodič ( šířka: 100 %; výška: 100 %; pozice: pevná; nahoře: 0; vlevo: 0; přetečení: auto; ) .block ( pozice: absolutní; nahoře: 50 %; vlevo: 50 %; transform: translate( -50 %, -50 %); img ( display: block; ) )

Možnost 7. Tlačítko.

blok

Rodič ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; pozadí: žádné; ohraničení: žádné; obrys: žádné; ) .block ( zobrazení: inline-block; img ( display: block;; border: none; ) )

Bonus

blok

Můžete také zarovnat obrázek na střed a pokud je obrázek větší rodič, upravte jej na velikost rodič.
Příklad: jsfiddle.net/serdidg/nfqg9rza/3 .
Příklad velkého obrázku:

Horizontální a vertikální vyrovnání prvků. Zarovnání na střed: rozložení CSS

1. způsob

klady

Mínusy

2. způsob

klady

Mínusy

3. způsob

klady

Mínusy

4. metoda.

klady

Mínusy

5. metoda

klady

Mínusy

Krok 1

Název stránky

Nadpis 2

Krok 2

Krok 3

Krok 4

Kompatibilita

Horizontální centrování se zarovnáním textu

Centrování s okrajem: auto

Centrování s buňkou stolu

Absolutní centrování

Centrování s překladem

Centrování s flex zobrazením displeje

Centrování pomocí calc

Zarovnání s tabulkou

Zarovnání s vycpávkou

Zarovnání s výškou čáry

Roztažení zarovnání

Zarovnání se záporným okrajem-vrchol

Zarovnání s transformací

Zarovnání s Flexboxem

Jaký způsob zvolit?

Možnost 1. Negativní výplň.

Možnost 2: Automatické odsazení.

Možnost 3. Tabulka.

Možnost 4. Pseudoprvek.

Možnost 5. Flexbox.

Možnost 6. Transformace.

Možnost 7. Tlačítko.

Bonus