Како центрирати било шта помоћу ЦСС-а - поравнајте див, текст и још много тога

Центрирање ствари је један од најтежих аспеката ЦСС-а.

Сами методи обично нису тешки за разумевање. Уместо тога, то је више због чињенице да постоји толико много начина да се ствари центрирају.

Начин који користите може се разликовати у зависности од ХТМЛ елемента који покушавате да центрирате или од тога да ли га центрирате хоризонтално или вертикално.

У овом упутству ћемо размотрити како центрирати различите елементе хоризонтално, вертикално и вертикално и хоризонтално.

Како хоризонтално центрирати

Центрирање елемената водоравно је обично лакше од вертикалног центрирања. Ево неколико уобичајених елемената које бисте можда желели да центрирате водоравно и различитих начина за то.

Како центрирати текст помоћу ЦСС својства средишњег поравнања текста

Да бисте центрирали текст или везе хоризонтално, само користите text-alignсвојство са вредношћу center:

Hello, (centered) World!

p { text-align: center; }

Како центрирати див са ЦСС Маргин Ауто

Користите стенографско marginсвојство са вредношћу 0 autoза центрирање елемената на нивоу блока као што је divхоризонтално:

.child { ... margin: 0 auto; }

Како хоризонтално центрирати див са Флекбок-ом

Флекбок је најмодернији начин за центрирање ствари на страници и чини дизајнирање прилагодљивих распореда много лакшим него некада. Међутим, није у потпуности подржан у неким застарелим прегледачима као што је Интернет Екплорер.

Да бисте хоризонтално центрирали елемент помоћу Флекбок-а, само примените display: flexи justify-content: centerна родитељски елемент:

.container { ... display: flex; justify-content: center; }

Како се центрира вертикално

Центрирање елемената вертикално без савремених метода попут Флекбок-а може бити прави посао. Овде ћемо размотрити неке од старијих метода за прво центрирање ствари, а затим ћемо вам показати како се то ради са Флекбок-ом.

Како вертикално центрирати див са ЦСС апсолутним позиционирањем и негативним маргинама

Дуго је ово био начин да се ствари вертикално центрирају. За ову методу морате знати висину елемента који желите да центрирате.

Прво поставите displayсвојство надређеног елемента на relative.

Затим за подређени елемент поставите displayсвојство на absoluteи topна 50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

Али то заправо само вертикално центрира горњу ивицу подређеног елемента.

Да бисте заиста центрирали подређени елемент, поставите margin-topсвојство на -(half the child element's height):

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

Како центрирати див вертикално помоћу Трансформ анд Транслате

Ако не знате висину елемента који желите да центрирате (или чак и ако знате), овај метод је сјајан трик.

Ова метода је врло слична горњој методи негативних маржи. Поставите displayсвојство надређеног елемента на relative.

За подређени елемент поставите displayсвојство на absoluteи поставите topна 50%. Сада, уместо да користите негативну маргину за истинско центрирање подређеног елемента, само користите transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

Имајте на уму да translate(0, -50%)је то скраћеница за translateX(0)и translateY(-50%). Можете и да пишете transform: translateY(-50%)како бисте подређени елемент центрирали вертикално.

Како вертикално центрирати див са Флекбок-ом

Попут центрирања ствари хоризонтално, Флекбок омогућава супер лако центрирање ствари вертикално.

Да бисте усредсредили елемент вертикално, примените display: flexи align-items: centerна родитељски елемент:

.container { ... display: flex; align-items: center; }

Како центрирати и вертикално и хоризонтално

Како центрирати див вертикално и хоризонтално помоћу ЦСС апсолутног позиционирања и негативних маргина

Ово је врло слично горњој методи за центрирање елемента вертикално. Као и прошли пут, морате знати ширину и висину елемента који желите да центрирате.

Поставите displayсвојство надређеног елемента на relative.

Затим подесите displayимовину детета на absolute, topна 50%и leftна 50%. Ово само центрира горњи леви угао подређеног елемента вертикално и хоризонтално.

Да бисте заиста центрирали подређени елемент, примените негативну горњу маргину постављену на половину висине подређеног елемента и негативну леву маргину постављену на половину ширине подређеног елемента:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

Како центрирати див вертикално и хоризонтално помоћу Трансформ анд Транслате

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

.container { ... display: flex; justify-content: center; align-items: center; }

То је све што треба да знате да бисте центрирали најбоље од себе. Сада идите напред и усредсредите све ствари.