Я создаю сайт, где у меня есть изображения, центрированные как по вертикали, так и по горизонтали, и для этого я настроил их отображение: flex.Однако я хочу, чтобы они складывались и центрировались друг на друге.
Мой HTML-код выглядит так:
<body>
<div id="space">
<div>
<img id="outerrim" class="layer" src="./assets/css/images/outerrim.png">
<div>
<img id="innerrim" class="layer" src="./assets/css/images/innerrim.png">
</div>
</div>
</div>
</body>
А мой CSS-код выглядит так:
body, html {
height: 100%;
margin: 0;
}
#space {
background-image: url("./images/sky.png");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
}
.layer {
object-fit: contain;
display: flex;
flex-direction: column;
justify-content: center;
}
Вот как это выглядит: ссылка на картинку
Я хочу, чтобы эти два блеклых изображения перекрывались, но мне нужен гибкий CSS, чтобы изображения выравнивались как по вертикали, так и по горизонтали..
Любой совет?