Преглед садржаја
Кључне Такеаваис
- Центрирање елемената у веб изгледима је увек представљало изазов, али савремени ЦСС сада подржава лако централно позиционирање.
- Флекбок је најчешће коришћена метода за центрирање елемената, пружајући флексибилан модел распореда који омогућава лако поравнавање.
- ЦСС Грид и ЦСС позиционирање су такође ефикасне методе за центрирање елемената на веб страници, нудећи прецизну контролу над изгледом и поравнањем.
Центрирање елемента у вашем веб изгледу је изазов који је увек фрустрирао дизајнере. Није увек било лако урадити, али многи дизајни захтевају централно позиционирање. На срећу, савремени ЦСС сада има добру подршку за центрирање.
Научите како да центрирате див хоризонтално и вертикално користећи Флекбок, ЦСС Грид и ЦСС позиционирање.
Једноставна ХТМЛ датотека за вежбање центрирања
Сви следећи примери користе минимални ХТМЛ документ да би демонстрирали центрирање помоћу ЦСС-а. Користите ову ознаку и мењајте ЦСС према сваком одељку да бисте видели како се ова својства понашају.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Коришћење Флекбок-а за центрирање Див елемента
Мораћете да разумете основе Флекбок-а пре него што га употребите за центрирање див елемента. Срећом, Флекбок следи једноставан приступ, због чега се највише користи. Пружа флексибилан модел распореда који олакшава поравнавање и дистрибуцију простора између ставки у контејнеру, што га чини идеалним за центрирање елемената.
Користите следећи ЦСС да бисте постигли центрирање помоћу Флекбок-а.
body {
display: flex;
}
body {
justify-content: center;
align-items: center;
}
div { background-color: red; }
Гледајући резултат у ДевТоолс-у Гоогле Цхроме-а, можете видети како два својства контролишу поравнање дуж сваке осе:
Коришћење ЦСС мреже за центрирање Див елемента
Коришћење ЦСС Грид-а за центрирање елемента је још један ефикасан метод, који нуди прецизну контролу над изгледом и поравнањем.
body {
display: grid;
}
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
body {
place-items: center;
}
div {
background-color: blue;
}
У овом случају, једно својство контролише централно постављање дива на вашој страници:
Коришћење ЦСС позиционирања за центрирање Див елемента
Да бисте користили својство ЦСС позиције за центрирање дива, такође морате да разумете како функционише ЦСС трансформација са прелазима. Ево водича корак по корак са примером.
body {
position: relative;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
Транслате(-50%, -50%) трансформација помера див улево и нагоре за половину ширине и половину висине.
Ова метода функционише тако што прво центрира горњи угао елемента, а затим га помери релативно за половину ширине и половину висине.
Флекбок, ЦСС Грид и ЦСС позиционирање су моћни алати које можете користити за центрирање елемената на веб страници. Помоћу Флекбок-а можете центрирати и хоризонтално и вертикално са само неколико линија кода. ЦСС Грид пружа моћно поравнање у две димензије, а можете користити ЦСС позиционирање да центрирате елемент у односу на његов родитељски контејнер.
Помоћу ових техника можете осигурати да ваше веб странице изгледају чисто и професионално.