Трюки CSS #1

Tomash — Fri, 31 Dec 2021 01:53:19 +0000

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

Если применить 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;
}

DEV Community: Tomash

Трюки CSS #1