我希望能够在flex项目内水平垂直居中文本。我已经到处寻找并尝试了很多方法,但目前为止似乎没有任何有效的解决方案...
我是否可以在现有的flex容器内再嵌套一个flex容器?
html, body {
height: 100%;
margin: 0;
}
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
}
.page1 {
flex-grow: 1;
min-height: 100%;
background: lightblue;
}
#text1 {
font-size: 160%;
color: white;
font-family: roboto, sans-serif;
}
.page2 {
flex-grow: 1;
min-height: 100%;
background: cyan;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
<div class="flex-container">
<div class="page1">
<p id="text1">blabla bla blablabla.</p>
</div>
<div class="page2"></div>
<div class="page3"></div>
</div>