css - flex布局，垂直居中不了？
本文介绍了css - flex布局，垂直居中不了？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
讲道理我在panel>*下设置侧轴居中，文字垂直方向就会居中啊，为什么没有垂直居中？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin:0;
}
.panels{
display: flex;
/*justify-content:center;*/
justify-content:center;
color:#fff;
font-size: 24px;
font-weight: 600;
}
.panel{
height:100vh;
flex:1;
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
background: cover;
background-position: center;
}
.panel>*{
flex:1;
justify-content:center;
align-items:center;
}
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
</style>
<body>
<div class="panels">
<div class="panel panel1">
<p>Hey</p>
<p>Let's</p>
<p>Dance</p>
</div>
<div class="panel panel2">
<p>Give</p>
<p>Take</p>
<p>Receive</p>
</div>
<div class="panel panel3">
<p>Experience</p>
<p>It</p>
<p>Today</p>
</div>
<div class="panel panel4">
<p>Give</p>
<p>All</p>
<p>You can</p>
</div>
<div class="panel panel5">
<p>Life</p>
<p>In</p>
<p>Motion</p>
</div>
</div>
</body>
</html>解决方案
.panel>*{
/* flex:1;
justify-content:center;
align-items:center; */
}把这里样式删掉
这篇关于css - flex布局，垂直居中不了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
