Сім методів центрування за допомогою CSS

11

Від автора: Центрування елементів HTML на веб-сторінці здається простою справою. Іноді це дійсно так… але складні розмітки часто виключають деякі рішення, змушуючи веб-розробників працювати без сітки.

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

Сім методів центрування за допомогою CSS

Зображення взуття будуть відрізнятися, але завжди залишаться початкового розміру в 500px × 500px. Кольори моделі HSL («тон-насиченість-яскравість» застосовані до фонам для підтримки стійкої колірної теми.

Горизонтальне центрування за допомогою text-alignment

Сім методів центрування за допомогою CSS

Іноді найкращим залишається очевидне рішення:

div.center { text-align: center; background: hsl(0, 100%, 97%); }
div.center img { width: 33%; height: auto; }

Воно не вирівнює зображення по вертикалі: щоб його досягти, вам знадобилося б додати padding до div або margin-top і margin-bottom до його вмісту, залишаючи можливість контейнера отримати висоту від власного контенту.

Центрування за допомогою margin: auto

Сім методів центрування за допомогою CSS

І знову головним чином для горизонтального центрування, і з тими ж обмеженнями, що у вищенаведеного методу з text-alignment:

div.center { background: hsl(60, 100%, 97%); }
div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }

Зверніть увагу на display: block, в даному випадку воно необхідно для того, щоб зображення прийняло margin: 0 auto.

Центрування з table cell

Сім методів центрування за допомогою CSS

Застосовується display: table-cell, а не справжня розмітка таблиці; дозволяє як горизонтальне, так і вертикальне центрування. Зазвичай вимагає додавання і маніпулювання другого, зовнішнього елемента, який може бути чим завгодно – від div до самого body.

Сім методів центрування за допомогою CSS

CSS:

.center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; }
.center-core { display: table cell; text-align: center; vertical-align: middle; }
.center-core img { width: 33%; height: auto; }

Зауважте, що width: 100% потрібно для того, щоб запобігти згортанню div, і що зовнішнім контейнеру для вертикального центрування вмісту знадобиться деяка висота. Спроба відцентрувати елемент по вертикалі у body, крім того, втягне стандартний прийом – встановлення висоти html, body. Працює у всіх браузерах, включаючи IE8+.

Абсолютна центрування

Сім методів центрування за допомогою CSS

Нещодавно представлена Стівеном Шоу (Stephen Shaw) методика добре підтримується браузерами. Єдиний недолік її в тому, що для зовнішнього контейнера повинен бути оголошений height у якійсь формі:

.absolute-aligned {
position: relative; min-height: 500px;
background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
width: 50%;
min-width: 200px;
height: auto;
overflow: auto; margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

Стівен продемонстрував безліч варіантів цього коду, описуючи цей метод у своїй статті в Smashing Magazine.

Центрування за допомогою translate

Сім методів центрування за допомогою CSS

Нова методика Кріса Койера (Chris Coiyer), використовує перетворення CSS. Також підтримує горизонтальне і вертикальне центрування:

.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; }
.center img { position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); width: 30%; height: auto; }

Має декілька недоліків:

Кодом перетворень CSS для роботи у всіх браузерах потрібно вендорные префікси

Не працює в старих версіях IE (версії 8 і раніше)

Зовнішнього контейнера доведеться встановити висоту (або отримати її яким-небудь іншим чином), так як від свого абсолютно розташованого контенту він ніякої висоти не отримає.

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

Центрування за допомогою flexbox

Сім методів центрування за допомогою CSS

Можливо, стане самим простим рішенням центрування після зникнення варіантів властивостей і вендорних префіксів.

.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; }
.center img { width: 30%; height: auto; }

У багатьох відносинах найпростіше рішення, але стримуване безліччю старих синтаксисів і недоліком підтримки в більш старих версіях IE (хоча display: table cell зійде за прийнятне альтернативне рішення). Повний CSS:

.center { background: hsl(240, 100%, 97%);
display: -webkit-box; /* СТАРІ: Safari, iOS 6 і раніше; браузер Android, старий WebKit */
display: -moz-box; /* СТАРИЙ: Firefox (може бути з помилками) */
display: -ms-flexbox; /* СТАРИЙ: IE 10 */
display: -webkit-flex; /* ОСТАТОЧНИЙ З ПРЕФІКСАМИ Chrome 21+ */
display: flex; /* ОСТАТОЧНИЙ: Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

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

Центрування за допомогою calc

Сім методів центрування за допомогою CSS

Більш різнобічний, ніж flexbox, за певних обставин:

.center { background: hsl(300, 100%, 97%); min-height: 600px;position: relative; }
.center img { width: 40%; height: auto; position: absolute; top:calc(50% — 20%); left: calc(50% — 20%); }

Все дуже просто, calc дає вам можливість робити розрахунки в залежності від поточної розмітки сторінки. У вищенаведеній простої калькуляції 50% — це середина містить елемента, але його застосування в окремо встановить верхній лівий кут зображення в центр div а. Нам потрібно перенести цю позицію назад на половину ширини і половину висоти зображення. Висловлюючи це в повному вигляді:

top: calc(50% — (40% / 2)); left: calc(50% — (40% / 2));

Ви виявите, що в поточних браузерах ця методика, схоже, працює найкраще над вмістом з фіксованими відомими розмірами:

.center img { width: 500px; height: 500px; position: absolute; top:calc(50% — (300px / 2)); left: calc(50% — (300px – 2)); }

І знову, я буду обговорювати calc у майбутньої статті. У цієї техніки майже ті ж потенційні недоліки, що у flexbox: тоді як у неї хороша підтримка Firefox, починаючи з версії 4, в більш ранніх браузерних версіях їй потрібні вендорные префікси, і зовсім відсутня підтримка в IE 8. Повний код зображення буде такою:

.center img { width: 40%; height: auto; position: absolute;
top: -webkit-calc(50% — 20%); left: -webkit-calc(50% — 20%);
top: -moz-calc(50% — 20%); left: -moz-calc(50% — 20%);
top: calc(50% — 20%); left: calc(50% — 20%); }

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