👩‍💻 3 способа разместить элемент по центру:
✔️ С помощью flex:

.center-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

✔️ С помощью grid:

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

✔️ С помощью абсолютной позиции:

 .center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

👩‍💻 Шпаргалка CSS для (first, last) nth-child:
Используйте селекторы :first-child, :last-child и :nth-child() для точного выбора элементов в HTML документе.

🥰 :first-child: Выбирает первый дочерний элемент своего родителя.

li:first-child {
    /* Стили для первого элемента списка */
}

⭐️ :last-child: Выбирает последний дочерний элемент своего родителя.

li:last-child {
    /* Стили для последнего элемента списка */
}

🔥 :nth-child(): Выбирает элементы, которые соответствуют указанному математическому выражению.

/* Выбор каждого четвертого элемента */
li:nth-child(4n) {
    /* Стили для каждого четвертого элемента списка */
}