Jak wyśrodkować DIV za pomocą CSS [5 szybkich metod]

Jeśli kiedykolwiek zaczynałeś tworzyć projekty, korzystając ze swoich umiejętności kodowania, prawdopodobnie stałeś przed wyzwaniem wyśrodkowania elementów na stronie. Pytanie „Jak wyśrodkować element div?” to taki, z którym spotyka się prawie każdy twórca stron internetowych.

W tym blogu omówimy proste sposoby centrowania elementów za pomocą CSS. Od podstawowych metod po nowoczesne techniki – omówimy, jak centrować elementy w poziomie i pionie. Każda metoda zostanie wyjaśniona na prostych przykładach, dzięki czemu będziesz mógł dokładnie zobaczyć, jak ona działa.

Niezależnie od tego, czy dopiero zaczynasz przygodę z CSS, czy potrzebujesz szybkiego odświeżenia wiedzy, ten przewodnik pomoże Ci opanować sztukę centrowania elementów na stronach internetowych. Zacznijmy!

Co to jest DIV i po co w ogóle rozważać wyśrodkowanie DIV?

Element div lub podział to podstawowy element HTML, który działa jak kontener do grupowania innych elementów na stronie internetowej.

Pomyśl o tym jak o pudełku, którego możesz użyć do uporządkowania treści, takich jak tekst, obrazy lub inne elementy. Elementy div są niezbędne do strukturyzowania i stylizacji treści na stronach internetowych, dzięki czemu są one lepiej zorganizowane i atrakcyjne wizualnie.

Po co w ogóle rozważać wyśrodkowanie elementu Div?

Wyśrodkowanie elementu div jest bardzo ważne z punktu widzenia doświadczenia użytkownika. Może to jednak stanowić wyzwanie stylistyczne dla twórców stron internetowych, ponieważ może radykalnie poprawić wygląd i układ strony internetowej.

Oto dlaczego centrowanie jest ważne:

• Poprawiona czytelność i estetyka: Wyśrodkowanie treści może sprawić, że będzie ona bardziej atrakcyjna wizualnie i łatwiejsza dla użytkowników skupienie się na kluczowych elementach, takich jak przyciski, formularze lub obrazy.
• Responsywny projekt: gdy układ dostosowuje się do różnych rozmiarów ekranu, centrowanie pomaga zapewnić równowagę i dobry wygląd treści na wszystkich urządzeniach, od komputerów stacjonarnych po smartfony.
• Wyróżnienie kluczowych elementów: Wyśrodkowanie to świetny sposób na zwrócenie uwagi na ważne sekcje lub wezwania do działania, takie jak przycisk „Zarejestruj się” lub obraz charakterystyczny.
• Czystsze, bardziej profesjonalne układy: wyśrodkowany układ często wygląda na czystszy i bardziej dopracowany, nadając Twojej witrynie bardziej profesjonalny wygląd.

Jak wyśrodkować DIV za pomocą CSS (różne metody)

Centrowanie elementu div można wykonać na kilka różnych sposobów, w zależności od tego, czy chcesz go wyśrodkować w poziomie, w pionie, czy w obu przypadkach. Oto kilka prostych metod:

Oto niektóre z najpopularniejszych metod wyśrodkowania elementu div za pomocą CSS:

Metoda 1: Jak wyśrodkować element Div za pomocą automatycznych marginesów

Jeśli dopiero zaczynasz zajmować się projektowaniem stron internetowych, centrowanie elementów na stronie internetowej może wydawać się trudne, ale gdy już opanujesz tę czynność, jest to całkiem proste. Klasyczną i prostą metodą wyśrodkowania div w poziomie jest użycie automatycznych marginesów. Rozłóżmy to krok po kroku.

1. Co musisz wiedzieć

Aby wyśrodkować div w poziomie z automatycznymi marginesami, wykonaj następujące kroki:

• 1. Ogranicz szerokość: Najpierw upewnij się, że element div nie zajmuje całej szerokości kontenera. Domyślnie elementy div rozszerzają się, aby wypełnić całą szerokość. Aby go wyśrodkować, należy ustawić maksymalną szerokość.

• 2. Użyj automatycznych marginesów: Automatyczne marginesy po lewej i prawej stronie przesuną div na środek.

Oto prosty przykład:

HTML

<div class="centered-div">This is a centered div</div>

css

.centered-div {

max-width: fit-content; /* Makes the div only as wide as its content */

margin-left: auto; /* Pushes the div to the right */

margin-right: auto; /* Pushes the div to the left, centering it */
}

2. Dlaczego warto używać max-width: fit-content; ?

max-width: fit-content; reguła zapewnia, że ​​element div zajmie tylko tyle szerokości, ile potrzebuje, w oparciu o jego zawartość. Jeśli użyłeś stałej szerokości, np. 200px , element div może się przepełnić, jeśli kontener jest zbyt wąski. fit-content dynamicznie dostosowuje rozmiar div do jego zawartości.

3. Jak działają automatyczne marginesy?

Automatyczne marginesy działają jak głodne hipopotamy, pożerając równomiernie dodatkową przestrzeń po obu stronach, aby wyśrodkować element div. Ta metoda automatycznie dostosowuje się do różnych języków i jest idealna do centrowania pojedynczych elementów bez wpływu na inne.

Gdy oba marginesy są ustawione na auto , dzielą równomiernie dodatkową przestrzeń, co powoduje wyśrodkowanie div .

4. Korzystanie z nowoczesnego skrótu: margin-inline

Zamiast oddzielnie ustawiać margin-left i margin-right , możesz użyć właściwości margin-inline aby uzyskać czystsze podejście:

.centered-div {

maksymalna szerokość: dopasowana zawartość;

margines wbudowany: auto; /* Automatycznie ustawia lewy i prawy margines na automatyczny */

}

Metoda 2: Jak wyśrodkować DIV za pomocą Flexbox

Flexbox ułatwia centrowanie przedmiotów w obu kierunkach. Oto jak wyśrodkować pojedynczy element za pomocą Flexbox:

.kontener {

wyświetlacz: elastyczny;

justify-content: środek; /* Wyśrodkowuje w poziomie */

wyrównanie elementów: środek; /* Wyśrodkowuje w pionie */

}

W tym przykładzie .container jest skonfigurowany do korzystania z Flexbox. Właściwość justify-content: center centruje element w poziomie, podczas gdy align-items: center centruje go w pionie.

Kilka kluczowych punktów do rozważenia:

Centrowanie w poziomie i pionie: Flexbox ułatwia centrowanie przedmiotów zarówno w poziomie, jak i w pionie, nawet jeśli przepełniają pojemnik.

Wiele przedmiotów : Flexbox również dobrze radzi sobie z wieloma przedmiotami. Możesz użyć flex-direction: row , aby ułożyć elementy w rzędzie, lub flex-direction : kolumna, aby zastosować stos pionowy. Dodanie gap może dostosować odstępy między elementami.

Metoda ta jest bardzo elastyczna i powszechnie stosowana do centrowania elementów w różnych układach.

Metoda 3: Jak wyśrodkować DIV w rzutni

Jeśli chcesz wyśrodkować element, taki jak wyskakujące okienko lub baner, na środku ekranu (rzutni), możesz użyć pozycjonowania CSS. Oto prosty sposób, aby to zrobić:

1. Podstawowe centrowanie w ustalonej pozycji

Aby wyśrodkować element w poziomie i w pionie, wykonaj następujące czynności:

• Ustaw pozycję na stałą:

– position: fixed; sprawia, że ​​element pozostaje na miejscu podczas przewijania. To tak jakby przykleić element do ekranu.

• Użyj wstawki, aby zakotwiczyć:

– inset: 0px; to skrót umożliwiający ustawienie odległości elementu od krawędzi rzutni (góra, prawa, dół, lewa) na 0 pikseli. Spowoduje to rozciągnięcie elementu tak, aby wypełnił cały ekran.

• Ogranicz rozmiar :

– Ustaw width i height , aby określić rozmiar elementu.

– Użyj max-width i max-height aby upewnić się, że nie przepełni się na mniejszych ekranach.

• Wyśrodkuj z automatycznymi marginesami : – margin: auto; centruje element. Dzieli dodatkową przestrzeń wokół siebie równomiernie, upewniając się, że pozostaje wyśrodkowana.

Przykładowy kod:

.element {

pozycja: stała;

wstawka: 0; /* Zakotwicza element do wszystkich krawędzi */

szerokość: 12rem; /* Ustawia stałą szerokość */

wysokość: 5rem; /* Ustawia stałą wysokość */

maksymalna szerokość: 100vw; /* Zapewnia, że ​​nie przekracza szerokości widocznego obszaru */

maksymalna wysokość: 100dvh; /* Zapewnia, że ​​nie przekracza wysokości rzutni */

margines: automatyczny; /* Wyśrodkowuje element */

}

2. Centrowanie wyłącznie w poziomie

Jeśli chcesz wyśrodkować element tylko w poziomie (np. baner z ciasteczkami na dole), wykonaj następujące czynności:

• Pozycja ustalona:

– position: fixed; utrzymuje element na miejscu.

• Zakotwicz do krawędzi:

– Użyj left: 0; i right: 0; rozciągnąć go poziomo z jednej strony na drugą.

– Ustaw bottom: 8px; aby ustawić go od dolnej krawędzi.

• Ogranicz i wyśrodkuj:

– Ustaw stałą szerokość.

– Użyj margin-inline: auto; aby wyśrodkować go w poziomie.

Przykładowy kod:

.element {

position: fixed;

left: 0;

right: 0;

bottom: 8px; /* Positions from the bottom edge */

width: 12rem; /* Sets a fixed width */

max-width: calc(100vw - 16px); /* Ensures it fits within the viewport with some buffer */

margin-inline: auto; /* Centers horizontally */

}

3. Centrowanie elementów o nieznanych rozmiarach

Jeśli nie znasz rozmiaru elementu, ale nadal chcesz, aby był wyśrodkowany:

• Użyj Fit-Content:

– width: fit-content; i height: fit-content; pozwól elementowi skurczyć się wokół jego zawartości.

• Zastosuj centrowanie:

– Połącz z position: fixed; i margin: auto; wyśrodkować.

Przykładowy kod:

.element {

position: fixed;

inset: 0;

width: fit-content; /* Shrinks to fit content */

height: fit-content; /* Shrinks to fit content */

margin: auto; /* Centers the element */

}

Dzięki tym metodom można łatwo wyśrodkować elementy w rzutni, niezależnie od ich rozmiaru.

Metoda 4: Jak wyśrodkować DIV za pomocą siatki CSS

CSS Grid to potężne narzędzie do projektowania układu, szczególnie przydatne do centrowania elementów. Oto jak możesz łatwo wyśrodkować coś zarówno w poziomie, jak i w pionie, używając siatki CSS:

1. Centrowanie pojedynczego elementu

Aby wyśrodkować element w jego kontenerze, możesz zastosować prostą konfigurację za pomocą siatki CSS:

• Skonfiguruj wyświetlanie siatki:

– display: grid; zamienia pojemnik w siatkę.

• Użyj zawartości miejsca:

– place-content: center; to skrót, który centruje zawartość zarówno w poziomie, jak i w pionie. Ustawia zarówno justify-content (w poziomie), jak i align-content (w pionie) do center .

Przykładowy kod:

css

.kontener {

wyświetlacz: siatka;

zawartość miejsca: centrum; /* Wyśrodkowuje zawartość zarówno w poziomie, jak i w pionie */

}

Dzięki temu element znajduje się dokładnie pośrodku pojemnika, niezależnie od jego rozmiaru.

2. Różnice w stosunku do Flexboxa

Chociaż CSS Grid może wyśrodkować elementy, zachowuje się inaczej w porównaniu do Flexbox:

– Flexbox: Wyśrodkowuje elementy na podstawie ich rozmiaru i rozmiaru pojemnika.

– Siatka CSS: Wyśrodkowuje elementy w oparciu o rozmiar komórki siatki, co może być trudne, jeśli rozmiar komórki siatki nie jest zdefiniowany.

Przykładowy kod w siatce z procentami:

css

.kontener {

wyświetlacz: siatka;

zawartość miejsca: centrum;

}

.element {

szerokość: 50%; /* Szerokość wynosi 50% komórki siatki */

wysokość: 50%; /* Wysokość wynosi 50% komórki siatki */

}

Jeśli rozmiar komórki siatki nie zostanie określony, element może okazać się mniejszy niż oczekiwano. Flexbox jest często prostszy w przypadku podstawowego centrowania.

3. Centrowanie wielu elementów

CSS Grid może również obsługiwać wiele elementów w tej samej komórce:

• Przypisz wiele elementów do tej samej komórki:

– Użyj grid-row i grid-column , aby umieścić elementy w tej samej komórce siatki.

• Wyśrodkuj elementy w komórce:

– Dodaj place-items: center; aby wyśrodkować elementy w komórce siatki.

Przykładowy kod:

css

.kontener {

wyświetlacz: siatka;

zawartość miejsca: centrum; /* Wyśrodkowuje komórkę siatki */

elementy-miejsca: centrum; /* Wyśrodkowuje elementy w komórce */

}

.element {

rząd siatki: 1;

kolumna siatki: 1; /* Wszystkie elementy są umieszczone w tej samej komórce */

}

W tej konfiguracji na środku pojemnika układa się wiele przedmiotów, nawet jeśli mają one różne rozmiary.

Kluczowe punkty

– Siatka CSS doskonale nadaje się do złożonych układów i gdy potrzebujesz precyzyjnej kontroli nad rozmieszczeniem.

– Flexbox jest zwykle prostszy w przypadku prostych zadań centrowania.

Mając te podstawy, możesz używać siatki CSS do wyśrodkowania zarówno pojedynczych, jak i wielu elementów w różnych scenariuszach.

Metoda 5: Jak wyśrodkować tekst w CSS

Centrowanie tekstu różni się nieco od centrowania innych elementów, takich jak obrazy czy elementy div. Oto prosty sposób, jak to zrobić:

Centrowanie bloku tekstu

Jeśli chcesz wyśrodkować blok tekstu w kontenerze (jak akapit w elemencie div), użyj właściwości text-align . Działa to najlepiej, gdy tekst znajduje się w elemencie blokowym, takim jak div , p lub h1 .

Oto jak to zrobić:

css

.kontener {

wyrównanie tekstu: do środka;

}

Ten kod informuje przeglądarkę, aby wyśrodkowała tekst wewnątrz kontenera. Jeśli chcesz także wyśrodkować sam pojemnik, możesz do tego użyć Flexbox lub Grid:

css

.kontener {

wyświetlacz: elastyczny;

justify-content: środek;

wyrównanie elementów: środek;

wysokość: 100vh; /* Ustawia kontener na pełną wysokość w celu centrowania w pionie */

}

A co z Flexboxem i Gridem?

Flexbox i Grid doskonale nadają się do centrowania całych kontenerów, ale nie centrują tekstu w tych kontenerach. Jeśli do wyśrodkowania akapitu używasz Flexbox lub Grid, wyśrodkowuje on blok tekstu, a nie poszczególne linie lub znaki w środku.

Centrowanie tekstu za pomocą Flexbox

Jeśli używasz Flexbox do wyśrodkowania akapitu, w ten sposób:

css

.kontener {

wyświetlacz: elastyczny;

justify-content: środek;

wyrównanie elementów: środek;

wysokość: 100vh;

}

Wyśrodkowuje cały akapit w kontenerze. Aby jednak wyśrodkować sam tekst w tym akapicie, potrzebujesz także text-align: center; .

Przyszłe funkcje CSS

W CSS nastąpił ekscytujący rozwój! Nadchodzą nowe funkcje, które jeszcze bardziej ułatwią centrowanie. Na razie używam Flexboxa lub Grida z text-align: center; to najlepszy sposób, aby sobie z tym poradzić.

To proste podejście pomaga zachować dobry wygląd i wyśrodkowanie tekstu, niezależnie od tego, gdzie się on znajduje na stronie!

Biorąc jednak pod uwagę wszystkie powyższe metody, możesz nie być pewien, która z nich najlepiej nadaje się do różnych sytuacji. Jeśli tak jest, zapoznaj się z poniższą konkluzją.

Wniosek

Na tym blogu nauczyłeś się, jak wyśrodkować element DIV w poziomie, w pionie i na środku strony, korzystając z różnych narzędzi, takich jak Flexbox i automatyczne marginesy. Każde z tych narzędzi ma swoje zalety i scenariusze użycia. Aby Ci pomóc, oto kilka typowych przypadków użycia:

• Automatyczne marginesy: Użyj tej opcji do prostego centrowania w poziomie.
• Flexbox: Najlepszy do centrowania elementów w obu kierunkach oraz podczas pracy z rzędami lub kolumnami elementów.
• Centrowanie rzutni: idealne do wyskakujących okienek lub elementów, które muszą być wyśrodkowane na ekranie.
• Siatka CSS: idealna do złożonych układów i gdy potrzebne jest centrowanie zarówno wierszy, jak i kolumn.

Jeśli masz jakieś pytania lub wątpliwości dotyczące tego wpisu, daj nam znać w sekcji komentarzy poniżej:

Rahul

Rahul Kumar jest entuzjastą sieci i specjalistą ds. strategii treści, specjalizującym się w WordPressie i hostingu. Dzięki wieloletniemu doświadczeniu i zaangażowaniu w bycie na bieżąco z trendami branżowymi tworzy skuteczne strategie online, które generują ruch, zwiększają zaangażowanie i zwiększają konwersję. Dbałość Rahula o szczegóły i umiejętność tworzenia atrakcyjnych treści czyni go cennym nabytkiem dla każdej marki chcącej poprawić swoją obecność w Internecie.