Прошу вашей помощи, как мне центрировать контент 'Vintage Oliva' (белый блок)? Использую css grid для создания верстки, при увеличении размера монитора заметно, что весь контент в этом блоке прижимается к верху. Заранее спасибо
<!-- Vintage grid -->
<div class="block-grid">
<div class="image-bicycle-vintage">
<div class="bicycle-company-logo"></div>
<img src="images/Layer-101.png">
</div>
<div class="block-vintage-oliva">
<div class="content-vintage-oliva">
<div class="image-vintage-oliva"></div>
<h1>Vintage Oliva</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
<div class="border"></div>
</div>
</div>
<div class="image-bicycle-third">
<img src="images/Layer-11.png">
</div>
</div>
/*-------------grid vintage--------------*/
.block-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax (400px, auto) minmax (200px, auto);
}
.block-grid > .image-bicycle-vintage > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-bicycle-vintage > .bicycle-company-logo {
background: url(images/Logo-bicycle-company.png) no-repeat 50% 50%;
background-size: cover;
width: 113px;
height: 118px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.image-bicycle-vintage {
grid-column: 1 / 3;
grid-row: 1 / 3;
background: #282f35;
position: relative;
height: 100%;
}
.block-vintage-oliva {
grid-column: 3 / 4;
grid-row: 1 / 2;
object-fit: cover;
}
.content-vintage-oliva {
margin: 0 auto;
text-align: center;
padding-top: 50px;
width: 82%;
}
.image-vintage-oliva {
background: url(images/Icon1.png) no-repeat 50% 50%;
background-size: contain;
width: 41px;
height: 30px;
margin: 0 auto;
}
.block-vintage-oliva h1 {
font-size: 16px;
text-transform: uppercase;
color: #353738;
padding: 30px 0 25px;
}
.block-vintage-oliva p {
color: #848789;
font-size: 16px;
font-family: 'Lato Regular';
line-height: 31px;
text-align: justify;
}
.border {
border-bottom: 1px solid #848789;
width: 50px;
margin: 44px auto 54px auto;
color: #848789;
}
.image-bicycle-third {
background: #353738;
grid-column: 3 / 4;
grid-row: 2 / 3;
height: 100%;
}
.image-bicycle-third > img {
width: 100%;
height: 100%;
object-fit: cover;
}
align-items
иalign-self
как вflexbox
работает.