До сих пір в CSS було проблемою, що він працює переважно вздовж однієї осі. Залежно від контексту це може бути вертикальна або горизонтальна вісь. І це чудово підходить для стека блокових елементів (розташованих один за іншим), наприклад:
display: block; width: 100%;
Inline-block і блокові елементи з полями
Елементи, які оголошені як inline-block або block можна вирівняти горизонтально по центру за допомогою лівого та правого полів (margin), які розраховуються автоматично:
display: block; margin-left: auto; margin-right: auto;
Використання макета таблиці
Простий і швидкий спосіб змусити елемент центрироваться по вертикалі - це зробити елемент осередком таблиці: наприклад, використовуючи display: table і display: table-cell і застосовуючи стиль vertical-align: middle;
Якщо ви центріруете елементи за допомогою CSS 2D transform, то користувачі, які на жаль застрягли в старих браузерах (причина цього: самі не хочуть оновлюватися або не вміють або через обмеження компанії в якій вони працюють) не обслуговуватимуться. Для них ваш сайт буде виглядати не зовсім правильно. Але ви можете використовувати резервний варіант - наприклад, використовувати Modernizr для виявлення відсутності CSS transform і використовувати альтернативні методи для досягнення того ж ефекту на браузерах, які не підтримують цю технологію.
З метою підтримки WebKit користувачів, вам потрібно буде використовувати префікс конкретно для браузерів на цьому движку, тобто -webkit-. Це трохи дивно, тому що версії Internet Explorer, а саме 10 і вище, підтримує властивість transform без необхідності префікс -ms.
Крім того можна підтримати ідеї graceful degradation (відмовостійкість клієнтських веб-інтерфейсів) і progressive enhancement (прогресивне поліпшення), які дозволяють користувачам використовувати візуально недосконалий, але повністю функціональний сайт.