通过 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>
渲染效果：
