Css розміщення блоку по центру. Розташування div по центру та інші тонкощі позиціонування. З чого вибрати або методи

Розбираємо центрування блокових елементів в CCS. Маємо по центру кілька DIVабо LIелементів. Пропоную декілька своїх варіантів на більшість випадків.

У цій статті немає мети навести всі варіанти центрування та переписати те, що вже десь є. Не пам'ятаю вже чомусь, але мене часто не влаштовували запропоновані варіанти. Або там були фіксовані блоки або все злітало при адаптивній верстці або ще якісь недоліки.

Іноді для вирівнювання центром достатньо додати пару атрибутів і не потрібно нічого складного городити. Наприклад, так я.

Нижче кілька варіантів адаптивної верстки вирівнювання блоків по центру, які я використовуюна сайтах. І якщо перший досить поширений, то, можливо, якісь інші способи навіть не будуть описані в Інтернеті саме таким чином.

Варіант 1

Просте вирівнювання всіх блоків у центрі сторінки.

Відцентруємо вміст ULіз 4 елементів LI, які знаходяться в блоці DIVз класом container.

У такому випадку в CSS достатньо наступних правил:

Container (
width: 100%;
}

Container ul (
text-align: center;
list-style: none;
}

Container li (
display: inline-block;
}

Отримаємо наступний вигляд: Тут відцентровано 4 елементи LI. При зменшенні розмірів екрана елементи, що не поміщаються, йдуть вниз.

Якщо блоки LIз цими властивостями не встановлюються центром, отже якесь інше властивість їм заважає. Наприклад, це може бути властивість float:leftабо display: table;або якесь інше.

Тепер верхню структуру (в базовий каркас вирівнювання CSS) можна додати інші стилі. Наприклад, зробити фіксований розмір блоків і відступів один від одного:

Container li (
display: inline-block;
margin: 5px;
width: 100px;
}

Отримаємо таке:

Але у такому варіанті є один мінус. Блоки розташовані по центру, але ліворуч і праворуч величезні відстані. Їх можна зменшити змінюючи width.

А можна зробити контейнери однакового розміру так, щоб відступи були тільки між контейнерами, а ліворуч і праворуч їх не буде.

Тоді ми приберемо marginі додамо ширину такого width, щоб повністю покривав область.

Container li (
vertical-align: top;
display: inline-block;
width: 32.899%;
}

Між блоками залишиться невелика ділянка порожнього простору. А щоб зробити його ще більше, можна відступати всередині за допомогою параметра padding.

У блоках я спеціально не додаю нічого зайвого, щоб залишити ті стилі, які безпосередньо впливають на вирівнювання. Але якщо ви зробите те саме, то такі блоки не отримати. Хоча б тому, що, по-перше, потрібно додати колір до блоку, а по-друге, якщо він порожній поставити height: 100px;. Інші атрибути вже на свій смак.

Підсумковий варіант такий:

У наведеному скріншоті вище я залишив інші ділянки сайту, щоб було зрозуміло, де межі блоків, бо якщо вони прилягають до краю, то краю вже не видно. А на картинці білі краї ліворуч і праворуч — це вже інше центрування, яке не має нічого спільного з прикладом. Повторюся, самі блоки прилягають до країв, яких не видно, тому що їх повністю покривають.

Варіант 2

Для центрування блоків винайдено дуже багато методів. А от якщо потрібно центрування зробити розумнішим, тут доводиться поламати голову. На щастя, я вивів один цікавий спосіб для наступних цілей:

Як вирівняти всі блоки div центром так, щоб блок на наступному рядку вирівнювався по лівому краю?

Маємо таку структуру:

Для них прописуємо класи:

width: 90%;
margin: 0 auto;
}

Archive-article (
display: inline-block;
vertical-align: top;

Width: calc(33.3333% - (0.666666666667 * 36px));
margin: 0 10px 0 11px;
}

Слід звернути увагу, що якщо змінювати розміри calc, то потім треба підлаштовувати експериментальним шляхом розміри margin. Інакше блоки не розташовуватиметься по центру.

Це центрування доводиться робити на око. Натомість, якщо на новому рядку блоків менше, ніж на рядку вище, цей одинокий блок буде з лівого боку. І це виглядає куди симпатичніше, ніж коли на наступному рядку один блок знаходиться по центру.

Застосувавши техніку вище, ми отримаємо адаптивну верстку, з усіма рівними краями, яка не псуватиметься при зміні розмірів екрану.

А якщо ми хочемо, щоб на мобільній версії було не 3 блоки, а 2, то в ccs для дозволу 768 пікселів, розіб'ємо блоки інакше:

@media screen and (max-width: 768px) (
.archive-article (
width: calc(47.3333% - (0.666666666667 * 25px));
margin: 0 10px 0 20px;
}
}

Отримаємо ті ж самі блоки в мобільному варіанті, але вже по два блоки на рядок:

Варіант 3

Тепер вирівнюватимемо за допомогою flex. Може здатися, що це ідеальний спосіб вирівнювання, тому що він справді працює дуже просто. Однак FLEX не справляється із завданням, описаним у варіанті 2. Принаймні, у мене не виходило досягти тих же результатів.

До наступної секції:

Додаємо стилі:

#cssmenu (
margin: 20px auto;
}

#cssmenu ul (
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#cssmenu > ul > li (
margin: 1px;
}

Отримуємо:

У наведеному прикладі:

flex-wrap: wrap;

Перекидає блоки на наступний рядок, якщо заповнюють контейнер. Інакше вони йдуть далі за вікно браузера.

justify-content: center;

Ми вирівнюємо вміст блоків у центрі.

Варіант 4

Ще один варіант вирівнювання за допомогою технології Flex.

Маємо контейнер із двома блоками всередині. Нам потрібно, щоб ці два блоки ділили ширину на дві рівні сторони.

Для цього пропишемо в стилях такі характеристики:

Container (
display: flex;
}

Block (
flex-basis: 100%;
}

Варіант 5

Є ще один варіант центрування блоків, якщо їх суворо дорівнює кількість. Наприклад: блоків 9, по 3 на кожну сходинку. І ви знаєте, що так залишатиметься завжди. Наприклад, ви робите лендінг пейдж і знаєте, напевно, що нічого зайвого між цими блоками додаватися на сайт не буде.

Отже, маємо 9 блоків наступного виду (не став дублювати 9 разів рядки, але майте на увазі, що блоків 9):

Застосовуємо стилі для них:

Archive-container-for-articles (
width: 100%;
text-align: center;
}

Archive-article (
width: 25%;
vertical-align: top;
display: inline-block;
text-align: left;
}

Archive-article:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
margin: 20px 0 30px 40px;
}

Archive-article:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
margin: 20px 40px 30px;
}

Archive-article:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
margin: 20px 40px 30px 0;
}

Отримаємо також адаптивну верстку. При зменшенні екрана блок, що не поміщається, йтиме в центр низу

Перевага цього виду центрування в тому, що ви можете чітко і зрозуміло зробити відступи між блоками.

А головна вада, що всередину блоків не можна нічого помістити. Будь-який елемент:

будь то divабо pабо ще щось, буде вважатися внутрішнім елементом nth-child. В результаті на нього накладеться стилі CSS і всі відступи зроблені за допомогою margin змістять блоки не так, як було задумано спочатку.

Дуже часто стоїть завдання вирівняти блок по центру сторінки/екрану, та ще й так, щоб без ява-скрипта, без завдання жорстких розмірів або негативних відступів, ще щоб і скроллбари працювали у батька, якщо блок перевищує його розміри. У мережі ходять досить багато одноманітних прикладів, як вирівняти блок по центру екрана. Як правило, більшість з них засновані на одних принципах.

Нижче представлені основні способи вирішення задачі, їх плюси та мінуси. Щоб розуміти суть прикладів, рекомендую зменшити висоту/ширину віконця Result у прикладах за вказаними посиланнями.

Варіант 1. Негативний відступ.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 50%; left : 50%; margin: -125px 0 0 -125px; img ( max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; ) )

Варіант 2. Автоматичний відступ.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; ))

Варіант 3. Таблиця.

Parent ( width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; > .inner ( display: table-cell; text-align: center; vertical-align: middle; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

Щоб додати скролл в даний приклад, доведеться додати конструкцію ще один елемент.
Приклад: jsfiddle.net/serdidg/fk5nqh52/3.

Варіант 4. Псевдоелемент.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; height: 100%; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; img (display: block; border: none;))

Або, якщо вам потрібно, щоб батько займав лише висоту та ширину вікна, а не всієї сторінки:

Parent ( position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; 100%; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; ( display: block; border: none; ) )

Варіант 5. Flexbox.

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block ( background: #60a839; img ( display: block; border: none; ) )

Варіант 6. Transform.

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; ) .block ( position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%);img (display: block; ))

Варіант 7. Кнопка.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; ) .block ( display: inline-block; img ( display: block;; border: none; ) )

Бонус

Так само можна вирівнювати картинку по центру, і якщо картинка більше батькамасштабувати її за розміром батька.
Приклад: jsfiddle.net/serdidg/nfqg9rza/3.
Приклад з великою картинкою:

Завдання верстки, яке часто зустрічається - це вирівнювання тексту по вертикалі в блоці div.

Якщо з вирівнюванням тексту по горизонталі проблем зазвичай не виникає (використовуємо властивість text-align:center і все буде добре), то з вирівнюванням по вертикалі все трохи складніше.

Є одна властивість у CSS, яка називається vertical-align. Здавалося б, використовуючи його, можна вирішити всі проблеми. Але не тут було.

Потрібно враховувати такий момент, що vertical-align можна застосовувати тільки для вирівнювання вмісту осередків таблиць або для малих елементів, для вирівнювання один одного в межах одного рядка.

Для блокових елементів властивість vertical-align не працює.

Є два способи, як можна вийти із цієї ситуації:

Для тих, хто воліє все дивитися у відео:

Для тих, хто любить текст, читайте нижче спосіб вирішення цієї проблеми.

Спосіб А.Як одне з рішень, можна розмістити текст не в елементі div, а в осередку таблиці.

Спосіб Б.Використовувати своство display:table-cell;

Одна проблема, ця властивість не підтримують Internet Explorer 6-7 версії.

Ситуація 1.Вирівнювання одного рядка тексту.

Розглянемо найпростіший приклад.

Рядок тексту розташовується по верхньому краю. Т.к. у нас лише один рядок тексту, то для вирівнювання можна скористатися найпростішим способом: це додавання властивості line-height зі значенням, що дорівнює висоті елемента div, в якому текст знаходиться.

Знаючи ширину та висоту блоку, можна взяти половину цієї величини та задати її негативними значеннями для властивостей margin-left та margin-top.

Якщо не потрібна підтримка старих браузерів, цей варіант буде найоптимальнішим.

Як бачите, таке просте завдання, як вирівнювання тексту по центру, виявилося не таким простим на практиці.

Вирівнювання елементів центру в CSS - це одна з найпопулярніших причин, щоб поскаржитися на CSS. « Чому все так складно?" - обурюються вони. Мені здається, що проблема полягає не в тому, що це важко зробити, а в тому, що способів для вирівнювання елементів по центру дуже багато і буває досить складно вибрати з них відповідний.

Давайте вибудуємо всі можливі рішення у вигляді деревоподібної схеми і сподіватимемося, що це спростить наше завдання.

Отже, мені потрібно вирівняти елемент по центру.

Горизонтальне вирівнювання

Вирівнювати по центру рядкові елементи всередині батьківського блокового блоку можна досить просто:

Center-children ( text-align: center; )

Це буде працювати для inline , inline-block , inline-table , inline-flex і т.д.

Вирівняти по центру блоковий елемент ви можете встановивши властивостями margin-left та margin-right значення auto (у нього також має бути задана ширина, інакше елемент просто займе всю ширину контенту і не буде потреби у вирівнюванні). Найчастіше це робиться за допомогою скороченої властивості, ось так:

Center-me ( margin: 0 auto; )

Це буде працювати незалежно від того, яка ширина встановлена ​​у блокового елемента або його батька.

Зверніть увагу, що ви не зможете обтікати елемент, вирівняний по центру таким способом. Однак і для цього є трюк.

Вирівнювання по центру кількох блокових елементів

Якщо є два або більше блокових елементів, які потрібно вирівняти горизонтально по центру в межах одного рядка, то можливо вам краще змінити їх тип відображення. Нижче наведено приклад зміни їхнього типу відображення на inline-block і приклад з Flexbox:

Якщо ці кілька блоків розташовані на різних рядках, то техніка з автоматичними відступами, як і раніше, прекрасна:

Вертикальне вирівнювання

Вертикальне вирівнювання центром в CSS трохи складніше.

Вирівнювання по центру рядкового або рядково-* елемента

Вирівнювання елемента з одним рядком

Іноді рядкові/текстові елементи можуть вирівнюватися по центру просто тому, що вони мають однакове значення для властивостей padding-top і padding-bottom .

Link ( padding-top: 30px; padding-bottom: 30px; )

Якщо вам з якихось причин padding - це не варіант, а ви намагаєтеся вирівняти по центру певний текст і точно знаєте, що він не буде обернутий чимось ще, тобто невеликий трюк, суть якого полягає в тому, щоб встановити властивість line-height рівним значенню висоти елемента.

Center-text-trick ( height: 100px; line-height: 100px; white-space: nowrap; )

Вирівнювання багаторядкового елемента

Однакові відступи зверху і знизу можуть створити ефект вирівнювання по центру і для багаторядкових елементів, але якщо це не спрацює, то можливо, що елемент, в якому знаходиться текст, є коміркою таблиці, або така його поведінка явно задана за допомогою CSS. В даному властивість vertical-align обробляє це, на відміну від того, що воно зазвичай обробляє вирівнювання елементів усередині рядка.

Якщо це щось схоже на таблицю, можливо, ви зможете використовувати Flexbox ? Окремий Flex-елемент може бути легко розташований у центрі всередині Flex-контейнера.

Flex-center-vertically ( display: flex; justify-content: center; flex-direction: column; height: 400px; )

Пам'ятайте, що це насправді актуально, коли у контейнера є фіксована висота (px, %, та інші), ось чому тут у контейнера задана висота.

Якщо обидві техніки наведені вище не можна застосувати, ви можете використовувати техніку «примарного елемента», в якій псевдоелемент з висотою 100% розміщується всередині контейнера і вирівнюється вертикально по центру нього.

Ghost-center ( position: relative; ) .ghost-center::before ( content: " "; display: inline-block; ( display: inline-block; vertical-align: middle; )

Вирівнювання по центру блокового елемента

Вирівнювання елемента із відомою висотою

Досить часто ми не можемо знати висоту з багатьох причин: якщо змінюється ширина, текст може форматуватися і змінювати висоту. Різна стилізація тексту може змінювати висоту. Різний розмір шрифту може змінити висоту. Елементи з фіксованим співвідношенням сторін, такі як зображення можуть змінювати висоту при зміні власних розмірів і т.д.

Але якщо ви знаєте висоту елемента, то можете вирівнювати по центру так:

Parent ( position: relative; ) .child ( position: absolute; top: 50%; height: 100px; margin-top: -50px; )

Вирівнювання елемента з невідомою висотою

Навіть якщо ви не знаєте висоту елемента, його все ще можна проштовхнути на 50% висоти його батька, а потім підняти на 50% його висоти:

Parent ( position: relative; ) .child ( position: absolute; top: 50%; transform: translateY(-50%); )

Невеликий сюрприз, це можна дуже просто зробити за допомогою Flexbox.

Parent ( display: flex; flex-direction: column; justify-content: center; )

Горизонтальне та вертикальне вирівнювання

Ви можете комбінувати представлені вище техніки, щоб отримати ідеально вирівняні по центру елементи. Але зазвичай їх можна поділити на 4 групи:

Вирівнювання елемента з фіксованою шириною та висотою

Використання негативних відступів (maring) рівних половині цієї ширини та висоти після абсолютного позиціонування елемента 50%/50% вирівнюють елемент по центру. У цього способу досить хороша підтримка кросбраузера:

Parent ( position: relative; ) .child ( width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; )

Вирівнювання елемента з невідомою шириною та висотою

Якщо ви не знаєте ширину або висоту елемента, то можете використовувати властивість transform і негативний translate в 50% в обох напрямках (залежно від поточної ширини/висоти елемента) до центру:

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

Вирівнювання елемента за допомогою Flexbox

Щоб вирівняти елемент по центру за допомогою Flexbox, вам потрібно використовувати дві властивості центрування:

Parent ( display: flex; justify-content: center; align-items: center; )

Вирівнювання елемента за допомогою CSS Grid

Це просто невеликий трюк (наданий Lance Janssen), який більшою мірою працюватиме для одного елемента:

Body, html ( height: 100%; display: grid; ) span ( /* thing to center */ margin: auto; )

Висновок

Тепер ви можете все що завгодно вирівняти по центру CSS.

Дуже часто стоїть завдання вирівняти блок по центру сторінки/екрану, та ще й так, щоб без ява-скрипта, без завдання жорстких розмірів або негативних відступів, ще щоб і скроллбари працювали у батька, якщо блок перевищує його розміри. У мережі ходять досить багато одноманітних прикладів, як вирівняти блок по центру екрана. Як правило, більшість з них засновані на одних принципах.

Нижче представлені основні способи вирішення задачі, їх плюси та мінуси. Щоб розуміти суть прикладів, рекомендую зменшити висоту/ширину віконця Result у прикладах за вказаними посиланнями.

Варіант 1. Негативний відступ.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 50%; left : 50%; margin: -125px 0 0 -125px; img ( max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; ) )

Варіант 2. Автоматичний відступ.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; ))

Варіант 3. Таблиця.

Parent ( width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; > .inner ( display: table-cell; text-align: center; vertical-align: middle; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

Щоб додати скролл в даний приклад, доведеться додати конструкцію ще один елемент.
Приклад: jsfiddle.net/serdidg/fk5nqh52/3.

Варіант 4. Псевдоелемент.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; height: 100%; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; img (display: block; border: none;))

Або, якщо вам потрібно, щоб батько займав лише висоту та ширину вікна, а не всієї сторінки:

Parent ( position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; 100%; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; ( display: block; border: none; ) )

Варіант 5. Flexbox.

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block ( background: #60a839; img ( display: block; border: none; ) )

Варіант 6. Transform.

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; ) .block ( position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%);img (display: block; ))

Варіант 7. Кнопка.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; ) .block ( display: inline-block; img ( display: block;; border: none; ) )

Бонус

Так само можна вирівнювати картинку по центру, і якщо картинка більше батькамасштабувати її за розміром батька.
Приклад: jsfiddle.net/serdidg/nfqg9rza/3.
Приклад з великою картинкою: