За свою карьеру я поучаствовал с разных сторон почти в сотне собеседований. Есть несколько заданий, которые настолько нравятся всем, что я уже устал изображать удивление. Сегодня расскажу про задание на CSS, которое я видел раз 10 — в маленьких компаниях, в банках, даже в яндексе:
Как расположить красный круг по центру страницы?
Само по себе задание довольно простое, тут идет счет на количество: хороший кандидат предлагает не меньше трёх вариантов. Сразу заметим, что у задания две части: сделать круг и поместить его по центру.
Делаем круг
Круг делается тремя базовыми способами. HTML + CSS:
.circle {
background: red;
width: 20px;
height: 20px;
border-radius: 50%;
}
<div class="circle"></div>
SVG:
<svg viewBox="0 0 2 2" width="20">
<circle cx="1" cy="1" r="1" fill="red" />
</svg>
Внешняя картинка, SVG как выше или любой другой формат:
<img src="/circle.svg" />
Отлично, пол-дела готово! Теперь осталось поместить наш круг по центру.
Помещаем по центру
Самый аккуратный, на мой взгляд, способ — флекс. К счастью, сейчас его поддерживает 99% браузеров. Работает со всеми вариантами кругов:
.page {
display: flex;
align-items: center;
justify-content: center;
}
Пока флекса не было, часто использовали трюк с position: absolute. Идея: сдвигаем правый-верхний угол круга в центр, потом сдвигаем обратно на половину размера круга.
.page {
position: relative;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
У этого способа есть куча вариаций. transform — единственный способ взять половину размера произвольного круга. Но если мы знаем размер круга заранее, можно сделать то же:
- отрицательный margin: left: 50% + margin-left: -10px;
- calc: left: calc(50% - 10px);
- Если вдруг мы знаем еще и размер контейнера (скажем, 300x300px): left: 290px;
Ну и, конечно, в случае со контейнером-страницей можно заменить absolute на fixed.
Еще один интересный способ — таблицы (простите). Поскольку table-cell сам считает свои размеры, круг придется обернуть в <div class="centering">. В остальном — красота:
.page {
display: table;
width: 100%;
height: 100%;
}
.centering {
display: table-cell;
text-align: center;
vertical-align: middle;
}
И наконец — я не зря привел вариант с картинкой. Если сделать её фоном страницы, легко отцентрировать так:
.page {
background-image: url(https://i.stack.imgur.com/5rXrg.gif);
background-repeat: no-repeat;
background-position: center;
}
---
Теперь давайте посчитаем, сколько способов получилось: 3 (вида кругов) * 7 (способов центрирования) + 1 (трюк с фоном) = 22 способа! Самое классное в этом задании — то, что вариантов на самом деле еще больше, и часто предлагают такие, про которые сам собеседующий и не думал. Знаете еще парочку? Поделитесь)
Такие популярные вопросы есть и по другим темам — js, архитектуре, работе браузера. Интересно? Подписывайтесь на мой канал!