У меня есть следующий HTML / CSS с контейнером (.full-width.section3
), который имеет абсолютную высоту.Однако центрирование контента внутри не работает.Поскольку я новичок в гибкой модели, может кто-нибудь объяснить мне, почему три ребенка div
не центрированы вертикально?
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
height:100vh;
background-color: white;
}
.full-width {
width:100%;
}
.full-width.section3{
height: 795px;
}
.full-width > .content > .third-parent{
height: 100%;
display: flex;
}
.full-width > .content > .third-parent > .third{
position: relative;
flex: 1 1 0px;
width: 100%;
border: 1px solid black;
}
.full-width > .content > .third-parent > .third > img{
position: absolute;
width: 100%;
height: auto;
left: 50%;
top:50%;
visibility: visible;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.middle-text{
position: absolute;
width: 100%;
left: 50%;
top:50%;
visibility: visible;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.full-width > .content > .third-parent > .third > .middle-text > .list-div2{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.full-width > .content > .third-parent > .third > .middle-text > .list-div2 li{
position: relative;
display: block;
margin-bottom: 5px;
padding: 10px;
text-align: left;
text-transform: uppercase;
visibility: visible;
}
.list-div2 li::before{
content: '\2022';
margin-right: 10px;
}
.items-list2 {
margin: 0;
padding: 0;
}
<div class="container">
<div class="full-width section3">
<div class="content">
<div class="third-parent">
<div class="third" id="one">
<img src="https://fakeimg.pl/350x200/?text=right">
</div>
<div class="third" id="two">
<div class="middle-text">
<h1>Some headline</h1>
<div class="list-div2">
<ul class="items-list2" id="list">
<li>Entry A</li>
<li>Entry B</li>
<li>Entry C</li>
<li>Entry D</li>
</ul>
</div>
</div>
</div>
<div class="third" id="three">
<img src="https://fakeimg.pl/350x200/?text=left">
</div>
</div>
</div>
</div>
</div>