【css】css实现水平和垂直居中

通过 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>centerem> 的容器将使项目在中心(在两个轴上)对齐。p>

<div class="center">
  <p>水平和垂直居中1p>
div>

body>

渲染效果:
【css】css实现水平和垂直居中_第1张图片

你可能感兴趣的:(前端,css,前端)