DEV Community 👩‍💻👨‍💻

Tomash
Tomash

Posted on

Трюки CSS #1

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


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

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


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

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

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

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

.i-am-centered {
    margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

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

.wrapper {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Become a ModeratorHey! We would love your help!

Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.