我在这里有几个嵌套的元素，我的目标是垂直居中对齐每个元素，以及p标签，我不知道我错过了什么，div.item$内的p标签不垂直对齐。解决方案是什么?
main .content-slider {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
background: #f5f5f5;
border: 1px solid red;
}
main .content-slider .wrapper {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid blue;
}
main .content-slider .wrapper div {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
border: 1px solid greenyellow;
}
main .content-slider .wrapper div p {
display: flex;
align-items: center;
justify-content: center;
}
.line-break {
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nike Official Site. Nike DE</title>
</head>
<!--<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">-->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="images/nike-icon.jpg" rel="shortcut icon">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<body>
<main>
<div class="content-slider">
<div class="wrapper">
<div class="item1">
<p>up to 30% off</p>
<div class="line-break"></div>
<p>it's here: the end of season sale. <a href="#"><span>shop</span></a></p>
</div>
<div class="item2">
<p></p>
</div>
<div class="item3">
<p></p>
</div>
</div>
</div>
</main>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>main .content-slider {
display: flex;
align-items: center;
justify-content: center;
height: auto;
background: #f5f5f5;
border: 1px solid red;
}
main .content-slider .wrapper {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid blue;
flex-direction: column;
}
main .content-slider .wrapper div {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
border: 1px solid greenyellow;
}
main .content-slider .wrapper div p {
display: flex;
align-items: center;
justify-content: center;
}
.line-break {
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nike Official Site. Nike DE</title>
</head>
<!--<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">-->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="images/nike-icon.jpg" rel="shortcut icon">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<body>
<main>
<div class="content-slider">
<div class="wrapper">
<div class="item1">
<p>up to 30% off</p>
<div class="line-break"></div>
<p>it's here: the end of season sale. <a href="#"><span>shop</span></a></p>
</div>
<div class="item2">
<p></p>
</div>
<div class="item3">
<p></p>
</div>
</div>
</div>
</main>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>