3 proste sposoby na wyśrodkowanie elementu za pomocą CSS
Szybkie linki
⭐ Prosty plik HTML do ćwiczenia centrowania
⭐ Wykorzystanie Flexbox do wyśrodkowania elementu Div
⭐ Wykorzystanie CSS Grid do wyśrodkowania elementu Div Wyśrodkowanie elementu div
⭐ Użycie pozycjonowania CSS do wyśrodkowania elementu div
Kluczowe wnioski
Centralizowanie elementów w projektach internetowych było kiedyś trudnym zadaniem, ale współczesny CSS ułatwia łatwe wyrównanie do środka.
Flexbox stał się dominującą techniką wyrównywania treści w sposób scentralizowany, oferując wszechstronny i elastyczny system siatki, który ułatwia płynne rozmieszczanie elementów.
Centralizację elementów na stronie internetowej można osiągnąć poprzez wykorzystanie zarówno siatki CSS, jak i technik pozycjonowania, zapewniając dużą precyzję w kontrolowaniu układu i wyrównania treści.
Wyśrodkowanie elementu w układzie strony internetowej od dawna stanowiło udrękę dla projektantów, ponieważ nie zawsze było to proste zadanie do wykonania. Niemniej jednak wiele projektów wymaga umieszczenia elementów w centrum, a na szczęście współczesny CSS oferuje solidne wsparcie w tym zakresie.
Zrozumienie procesu centrowania elementu div zarówno w poziomie, jak i w pionie przy użyciu flexbox, siatki CSS, a także tradycyjnych technik pozycjonowania CSS.
Prosty plik HTML do ćwiczenia centrowania
Dostarczone próbki kodu ilustrują implementację wyrównania poziomego poprzez wykorzystanie podstawowej struktury HTML, przy jednoczesnym manipulowaniu właściwościami CSS w celu uzyskania różnych efektów. Eksperymentowanie z różnymi arkuszami stylów zapewni wgląd w zachowanie tych atrybutów.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Wykorzystanie Flexbox do wyśrodkowania elementu Div
Flexbox wykorzystuje prostą strategię, która uczyniła go preferowanym wyborem ze względu na jego zdolność adaptacji. Model układu ułatwia wyrównanie i dystrybucję przestrzeni z łatwością, co czyni go optymalnym rozwiązaniem do centralizacji komponentów w kontenerze.
Wyśrodkuj zawartość za pomocą flexbox, stosując następujące reguły CSS:
⭐ Zawiń element div w kontenerze. Zastosuj właściwość display: flex do kontenera, aby aktywować układ Flexbox. W prostym przypadku testowym ciało może służyć jako kontener:
body {
display: flex;
}
⭐ Użyj właściwości justify-content i align-items, aby wyrównać elementy odpowiednio wzdłuż osi głównej (poziomej) i osi poprzecznej (pionowej). Aby wyśrodkować obie osie, ustaw te właściwości na center . W przypadku prostej wersji demonstracyjnej należy również ustawić wysokość ciała na 100vh, aby zobaczyć efekt wyrównania w pionie.
body {
justify-content: center;
align-items: center;
}
⭐ Nadaj elementowi div kolor tła, aby zwizualizować jego położenie na stronie końcowej:
div { background-color: red; }
orientacja od góry do dołu i od lewej do prawej.
Użycie CSS Grid do wyśrodkowania elementu div
Wyśrodkowanie elementu za pomocą CSS Grid zapewnia wysoki stopień precyzji w kontrolowaniu układu i wyrównania, pozwalając na większą elastyczność w projektowaniu stron internetowych o złożonej strukturze.
⭐ Zdefiniuj kontener dla swojego układu i zastosuj styl display: grid, aby aktywować CSS Grid. W tym przypadku ciało służy jako kontener.
body {
display: grid;
}
⭐ Użyj właściwości grid-template-columns i grid-template-rows, aby zdefiniować strukturę siatki. Do centrowania wystarczy pojedyncza kolumna i wiersz, więc użyj 1fr dla obu.
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
⭐ Użyj właściwości place-items, aby wyśrodkować zawartość siatki, zarówno w poziomie, jak i w pionie.
body {
place-items: center;
}
⭐ Stylizuj tło elementu div, aby wizualizować go w środku kontenera siatki.
div {
background-color: blue;
}
W tym przypadku pojedynczy atrybut reguluje najważniejsze pozycjonowanie elementu Div na stronie internetowej:
Używanie pozycjonowania CSS do wyśrodkowania elementu Div
Wyśrodkowanie elementu Div przy użyciu właściwości CSS position wymaga zrozumienia sposobu działania transformacji i przejść CSS. To zrozumienie umożliwia prawidłowe wyrównanie elementu w jego kontenerze nadrzędnym. Poniżej przedstawiono szczegółową procedurę wraz z ilustrującym ją przykładem.
⭐ Aby pozycjonować element div, upewnij się, że jego kontener ma pozycję względną. Ustanawia to względny kontekst pozycjonowania, dzięki czemu można umieścić element div w środku jego kontenera.
body {
position: relative;
}
⭐ Zastosuj pozycjonowanie bezwzględne do elementu div, a następnie użyj właściwości top i left, aby umieścić lewy górny róg elementu div dokładnie w środku jego kontenera.
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
Transformacja translate(-50%, -50%) przesuwa element div w lewo i w górę o połowę jego szerokości i połowę wysokości.
Podejście to działa poprzez początkowe wyrównanie lewego górnego rogu elementu do środka ekranu, a następnie przesunięcie go w poziomie i w pionie odpowiednio o połowę szerokości i połowę wysokości.
Flexbox, CSS Grid i pozycjonowanie CSS to bardzo skuteczne techniki centrowania treści na stronie internetowej. Wykorzystując Flexbox, można łatwo osiągnąć centrowanie poziome i pionowe przy minimalnym kodowaniu.CSS Grid oferuje solidne możliwości wyrównania w dwóch wymiarach, podczas gdy zastosowanie pozycjonowania CSS pozwala na wyśrodkowanie elementu względem zawierającego go elementu nadrzędnego.
Stosując takie metodologie, można zagwarantować wyrafinowany i dopracowany wygląd swojej strony internetowej.