тут нет нормального решения. При помощи CSS это можно сделать так:

<div class="container">
<div class="block blue"></div>
<div class="block red"></div>
<div class="block orange"></div>
<div class="block green"></div>
<div class="block center black"></div>
</div>
<style>
.container{
width: 1000px;
height: 1000px;
position: relative;
}
.block {
width: 500px;
height: 500px;
float: left;
}
.center {
z-index: 1;
position: absolute;
top: 250px;
left: 250px;
}
.blue{
background: blue;
}
.red{
background: red;
}
.orange{
background: orange;
}
.green{
background: green;
}
.black{
background: black;
}
</style>

А можно как то это с масштабирование придумать?

Насколько я знаю, только при помощи JS.
Можешь глянуть в сторону flexbox, но не знаю как ты туда положишь твой центральный блок.

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.