通过 justify-content 和 align-items设置水平和垂直居中， justify-content 设置水平方向，align-items设置垂直方向。
代码：
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<p>同时将 justify-content 和 align-items 属性设置为 <em>center</em> 的容器将使项目在中心（在两个轴上）对齐。</p>
<div class="center">
<p>水平和垂直居中1</p>
</div>
</body>
渲染效果：
![Vue [Day1]](https://img-blog.csdnimg.cn/2efb4a0f83cc41c6ab67ec7ef8d94148.png)
