Метод transform/translate
Каскадні таблиці стилів дають можливість за бажанням переміщати, скошувати, обертати і всіляко трансформувати веб-елементи. Для цього використовується властивість transform. В якості значень вказується бажаний тип перетворення і ступінь. У даному прикладі ми будемо працювати з translate:
transform: translate(50%, 50%);
Функція translate переміщує елемент його поточної позиції вліво/вправо, вгору/вниз. В дужках передаються два значення:
- ступінь переміщення по горизонталі;
- ступінь переміщення по вертикалі.
Якщо елемент потрібно пересунути тільки по одній з осей координат, тоді ви вказуєте після слова translate ім’я осі і в дужках величину необхідного зсуву:
transform: translateY(-20%);
В деяких підручниках можна зустріти transform з вендорными префіксами:
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
У 2018 році цього робити не потрібно, властивість підтримується всіма браузерами, включаючи Edge і IE.
Для того щоб змістити потрібний нам DIV по центру, CSS-функція translate записується зі значенням 50% для вертикальної і горизонтальній осі. Завдяки цьому, браузер змістить елемент з його поточної позиції наполовину від його ширини і висоти. Властивості width і height повинні бути обов’язково зазначені:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
.nav-bar{
display: block;
width: 90%;
height: 100vh;
margin: 0 auto;
background: linear-gradient(to left, red, #f06d06);
}
.navigation{
width: 50%;
height: 50%;
color: #FFF;
border: 1px dashed #F5F2F2;
transform: translate(50%, 50%);
}
</style>
</head>
<body>
<div class=”site-header”>
<div class=”logo”></div>
<div class=”nav-bar”>
<div class=”navigation”>
Goes Here some text
</div>
</div>
</div>
<div class=”main-content”></div>
<div class=”aside-column”></div>
<div class=”site-footer”></div>
</body>
</html>
Враховуйте, що елемент, до якого застосовується властивість transform рухається в незалежності від оточуючих його об’єктів. З одного боку, це зручно, але іноді зсуваючись, DIV може перекрити собою інший контейнер. Тому такий спосіб центрувати веб-компоненти вважається нестандартним і застосовують його тільки в випадках крайньої необхідності. Трансформації за всіма канонами CSS використовують для анімації.
