Трюки CSS #1

Несколько полезных код-сниппетов для того чтобы ты стал фронтенд-самураем 🤺

---

Если применить margin-left: auto к последнему флекс-айтему внутри контейнера он выровняется по правой стороне при том что остальные останутся слева.

|||--- → ||---|

---

Отцентрировать элемент внутри можно с помощью position: fixed

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

---

Центрирование внутри экрана с помощью grid

body, html {
    height: 100%;
    display: grid;
}

.i-am-centered {
    margin: auto;
}

---

Центрирование элементов внутри контейнера:

.wrapper {
  display: grid;
  place-items: center;
}