`
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./slider.css">
<title>slider</title>
</head>
<body>
flex
<script src="./slider.js"></script>
</body>
</html>
`
body {
background-color: #927df1;
display: flex;
align-items: center;
justify-content: center;
}
我在youtube上看，但它不起作用对齐项目：居中；
调整内容：居中；工作对齐项目：居中；不工作
为什么？youtube正在运行。。。。。plz帮助
问题可能是您没有指定灵活的方向，这对于对齐项目和证明内容有效性是必要的。尝试将此添加到正文CSS:
弯曲方向：柱；
问题是您没有可应用对齐项的内容。对齐项应该用于垂直对齐。你要找的可能是水平对齐。查看下面的小提琴，了解发生了什么。
body {
background-color: #927df1;
display: flex;
}
.box{
width:200px;
height:200px;
border: 1px solid blue;
display:flex;
align-items:center;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./slider.css">
<title>slider</title>
</head>
<body>
<div class="box">
flex
</div>
<div class="box">
flex
</div>
<div class="box">
flex
</div>
<script src="./slider.js"></script>
</body>
</html>编辑：如果您想使用对齐项使内容垂直居中，只需定义列的弹性方向属性即可。默认值为行，因此它将根据行高度对齐。将其设置为column将根据列的宽度对齐内容。
您的代码正常工作只是一个小错误。默认情况下，宽度和高度为100%；在这种情况下，我们只是简单地将高度定义为100vh
body {
background-color: #927df1;
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}