我刚开始学习HTML和CSS，遇到了这样一个问题，即justify-content不能将我的元素垂直居中。 我的Flex方向是列，即使将它作为默认行，并且使用align-items，我的元素也不会垂直移动，但水平移动总是有效的。 我只是尝试使用Flex将文本垂直和水平居中。 而且我用的是火狐，我也在Chrome上测试过。 这是HTML
<div class="brands">
<section class="YSL">
<h1>Yves Saint Laurent</h1>
</section>
<section class="LV">
<h1>Louis Vuitton</h1>
</section>
</div>
下面是元素的CSS:
.brands{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.YSL{
color: black;
margin: 0;
}
.LV{
color: black;
margin: 0;
}
您需要稍微更改HTML和CSS。
我想这正是你想要的，如果有什么我可以改进的地方，请告诉我:
null
html,
body {
height: 100%;
}
body {
margin: 0;
}
.brands {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.row {
border: 1px solid #000000;
}<div class="brands">
<div class="row">
Yves Saint Laurent
</div>
<div class="row">
Louis Vuitton
</div>
</div>