Jak umístíte blok s position absolute do středu stránky?

Umístění prvků na webové stránce je jedním z důležitých úkolů webového vývojáře. Když je nutné vytvořit prvek s absolutním umístěním a umístit jej do středu stránky, nastanou určité komplikace. V tomto článku se podíváme na metody, jak správně umístit prvek s position absolute, abyste dosáhli požadovaného efektu.

Jedním z běžných způsobů, jak umístit prvek do středu stránky pomocí position absolute, je kombinace hodnot vlastností top, left, right a bottom. Pokud chcete položku umístit vodorovně, použijte vlastnost left a nastavte hodnotu na 50%. Poté, Chcete-li vycentrovat svisle, musíte nastavit vlastnost top a přiřadit jí hodnotu 50%. Pomocí hodnoty vlastností top a left a poloviny výšky a šířky prvku lze upravit polohu prvku a dosáhnout požadovaného vycentrování.

Dalším způsobem, jak umístit prvek s position absolute do středu, je použití vlastností transform a translate. Chcete-li to provést, musíte nastavit hodnotu vlastnosti left na 50% a přidat následující kombinaci vlastností: transform: translate(-50%, -50%);. Tato kombinace vlastností umožňuje vycentrovat prvek vodorovně a svisle vzhledem k jeho velikosti.

Jak umístit position absolute do středu stránky

Následující kód ukáže, jak umístit prvek s position absolute do středu stránky pomocí CSS:

V tomto příkladu je vytvořen rodičovský prvek s position relative. Potom je vložený prvek (potomek) nastaven na position absolute. Hodnoty vlastností top a left nastavují prvek na 50% horního a levého okraje nadřazeného prvku.

Vlastnost transform: translate (-50%, -50%); používá se k nastavení položky přesně na střed stránky. Posunuje prvek o -50% své vlastní výšky a šířky, což má za následek vycentrování.

Pomocí těchto vlastností je tedy možné umístit prvek s position absolute do středu stránky.

Co je position absolute a proč jej používat?

Při použití position absolute prvek je vytržen z běžného toku prvků a umístěn vzhledem k kontextu uvedenému pomocí vlastností top, bottom, left a right.

Hlavní účel použití position absolute - jedná se o vytváření prvků s absolutním umístěním, které nezabírají místo v toku dokumentu a lze je přesunout kamkoli na stránce. To je užitečné při vytváření posuvníků, modálních oken, rozevíracích nabídek a dalších sekcí, které vyžadují přesné umístění.

Při použití position absolute měli byste být opatrní, protože položky s tímto umístěním mohou přesahovat okno prohlížeče, což může ovlivnit uživatelský zážitek. Je také důležité mít na paměti správný kontext umístění, aby prvky byly umístěny přesně tam, kde se očekává.

Элемент с абсолютным позиционированием

V tomto příkladu je prvek s absolutním umístěním umístěn uvnitř nadřazeného prvku s relativním umístěním. Pomocí vlastností top: 50%; left: 50% a transform: translate(-50%, -50%) prvek je přesně uprostřed nadřazeného prvku horizontálně i vertikálně.

Jak vycentrovat position absolute vodorovně

Použití vlastnosti position: absolute umožňuje umístit prvek do přesné pozice na stránce, vzhledem k jeho nejbližšímu umístěnému rodiči nebo prohlížeči. K dosažení horizontálního vycentrování pomocí position: absolute vyžaduje nějakou práci navíc.

Chcete-li vycentrovat prvek s absolutním horizontálním umístěním, postupujte takto:

1. Nastavte hodnotu left: 50% pro položku, kterou chcete vycentrovat. Tím se posune jeho levý okraj do poloviny šířky nadřazeného prvku.
2. Přidejte hodnotu transform: translateX (-50%) nebo margin-left: -50% pro posunutí položky zpět o polovinu své vlastní šířky. To povede k Centrování prvku.

Zde je příklad použití obou vlastností dohromady:

Příklad CSS stylů:

.parent .child 

Použitím těchto stylů na nadřazené a středové prvky můžete dosáhnout vodorovné Centrování prvku pomocí position: absolute .

Jak vycentrovat position absolute vertikálně

Instalace position: absolute; položce umožňuje plnou kontrolu nad její pozicí na stránce. Ale jak takový prvek vycentrovat vertikálně? Zde je několik způsobů, jak to udělat:

position: absolute;top: 50%;transform: translateY(-50%);

display: flex;justify-content: center;align-items: center;

position: relative;display: flex;justify-content: center;align-items: center;

position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);

Vyberte si způsob, který je pro vás nejvhodnější, a použijte jej k vycentrování prvků s position: absolute; vertikálně.

Jak vycentrovat position absolute vodorovně a svisle současně

Pro centrování prvku pomocí position: absolute; horizontálně a vertikálně, přidejte následující vlastnosti:

• left: 50%; - nastaví vzdálenost od levého okraje nadřazeného prvku k levému okraji k prvku na 50%;
• top: 50%; - nastaví vzdálenost od horního okraje nadřazeného prvku k hornímu okraji k prvku na 50%;
• transform: translate(-50%, -50%); - posune prvek zpět o 50% jeho šířky a výšky, aby dosáhl požadovaného vycentrování.

Příklad použití vlastností:

.container .centered-element

Nyní prvek s třídou centered-element bude vycentrován vodorovně a svisle vzhledem k nadřazenému prvku se třídou container.