/* Container
===================*/
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/*===== Article =====*/
.article__image {
position: absolute;
width 300px;
height: 300px;
top: 50%;
left: 50%;
z-index: 1;
}
.article {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
height: 600px;
width: 500px;
display: flex;
position: relative;
background: rgb(97, 7, 244);
background: linear-gradient(90deg, rgba(97, 7, 244, 1) 0%, rgba(140, 14, 230, 1) 100%);
justify-content: center;
align-items: center;
}
.container {
padding: 10px;
width: 400px;
height: 50px;
}
.article__title {
margin-top: 70px;
margin-left: 100px;
}
.article__text {
margin-top: 10px;
}
/*/===== Article =====*/
<article class="article">
<div class="container">
<img src="https://via.placeholder.com/300" alt="" class="article__image">
<h1 class="article__title">Lorem ipsum.</h1>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
</div>
</article>
Мне нужно выровнять фотографию по центру блога arcticle так, чтобы она была выше текста, но при этом находилась в этом блоке, как это сделать?