Полезные трюки CSS #1

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

|||---||---|


2. Центрирование внутри экрана с помощью position: fixed

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

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

body, html {
    height: 100%;
    display: grid;
}
.i-am-centered {
    margin: auto;
}

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

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