WIKI

Pokud chcete zarovnat objekt na střed stránky pomocí CSS, existuje několik možností. Zde jsou tři základní techniky, které můžete vyzkoušet:

1. Flexbox: Použití flexboxu je jednou z nejjednodušších metod pro zarovnání objektu na střed. Zde je příklad CSS kódu:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* nastavuje výšku kontejneru na výšku okna pro úplné vycentrování */
}

 V tomto příkladu máte kontejner (div nebo jiný prvek), který je nastaven jako flexbox kontejner. Vlastnost justify-content: center zarovnává obsah horizontálně na střed, zatímco align-items: center zarovnává obsah vertikálně na střed.

    2. Absolutní pozicování: Další možností je použít absolutní pozicování spolu s hodnotami left: 50% a top: 50%, které posunou objekt na polovinu šířky a výšky jeho rodičovského prvku. Následně můžete použít hodnoty translateX(-50%) a translateY(-50%), abyste objekt přesunuli zpět o polovinu jeho vlastní šířky a výšky.

.container {
  position: relative;
  height: 100vh;
}

.centered-object {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

V tomto příkladu je kontejner nastaven jako position: relative, což umožňuje absolutní pozicování uvnitř něj. Objekt, který chcete vycentrovat, je potom nastaven jako position: absolute s příslušnými hodnotami pro zarovnání na střed.

    3. Tabulkový model: Můžete také využít vlastnosti tabulkového modelu CSS pro zarovnání objektu na střed. Použití tabulkového modelu však vyžaduje vytvoření dodatečných prvků.

.container {
  display: table;
  width: 100%;
  height: 100vh;
}

.centered-object {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

V tomto příkladu je kontejner nastaven jako display: table, což vytváří podobné chování jako v tabulkách. Objekt, který chcete vycentrovat, je potom nastaven jako display: table-cell s příslušnými vlastnostmi pro zarovnání.

Tyto tři techniky jsou základním výchozím bodem pro zarovnání objektu na střed pomocí CSS. Vždy záleží na vašich konkrétních potřebách a struktuře stránky, kterou používáte.