Как да центрирате каквото и да било с CSS - Подравнете Div, Text и много други

Центрирането на нещата е един от най-трудните аспекти на CSS.

Самите методи обикновено не са трудни за разбиране. Вместо това, това се дължи повече на факта, че има толкова много начини за центриране на нещата.

Методът, който използвате, може да варира в зависимост от HTML елемента, който се опитвате да центрирате, или дали го центрирате хоризонтално или вертикално.

В този урок ще разгледаме как да центрирате различни елементи хоризонтално, вертикално и както вертикално, така и хоризонтално.

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

Центрирането на елементите хоризонтално обикновено е по-лесно от тяхното вертикално центриране. Ето някои често срещани елементи, които може да искате да центрирате хоризонтално и различни начини да го направите.

Как да центрирате текст със свойството CSS Text-Align Center

За да центрирате текст или връзки хоризонтално, просто използвайте text-alignсвойството със стойността center:

Hello, (centered) World!

p { text-align: center; }

Как да центрирате Div с CSS Margin Auto

Използвайте стенографското marginсвойство със стойността, за 0 autoда центрирате елементи на ниво блок като divхоризонтално:

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

Как да центрирате Div хоризонтално с Flexbox

Flexbox е най-модерният начин за центриране на нещата на страницата и прави проектирането на отзивчиви оформления много по-лесно, отколкото преди. Той обаче не се поддържа изцяло в някои стари браузъри като Internet Explorer.

За да центрирате елемент хоризонтално с Flexbox, просто приложете display: flexи justify-content: centerкъм родителския елемент:

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

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

Центрирането на елементи вертикално без съвременни методи като Flexbox може да бъде истинска работа. Тук ще разгледаме някои от по-старите методи, за да центрираме нещата първо вертикално, след което ще ви покажем как да го направите с Flexbox.

Как да центрирате Div вертикално с абсолютно позициониране на CSS и отрицателни полета

Дълго време това беше начинът да се центрират нещата вертикално. За този метод трябва да знаете височината на елемента, който искате да центрирате.

Първо задайте 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 */ }

Как да центрирате Div вертикално с Transform and Translate

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

Този метод е много подобен на метода с отрицателни маржове по-горе. Задайте 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%)да центрирате вертикално дъщерния елемент.

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

Подобно на центрирането на нещата хоризонтално, Flexbox прави супер лесното центриране на нещата вертикално.

За да центрирате елемент вертикално, приложете display: flexи align-items: centerкъм родителския елемент:

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

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

Как да центрирате Div вертикално и хоризонтално с CSS абсолютно позициониране и отрицателни полета

Това е много подобно на метода по-горе за центриране на елемент вертикално. Както миналия път, трябва да знаете ширината и височината на елемента, който искате да центрирате.

Задайте 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 */ }

Как да центрирате Div вертикално и хоризонтално с Transform and Translate

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; }

That's everything you need to know to center with the best of 'em. Now go forth and center all the things.