用弹性布局实现垂直左右居中

最新推荐文章于 2024-07-21 21:06:06 发布

frank201113

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量1.9w

点赞数 3

分类专栏： frontend

本文链接：https://blog.csdn.net/Handsome_fan/article/details/70049046

版权

frontend 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

以下代码是用弹性布局实现垂直左右居中的例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{
  	margin: 0;
  	padding: 0;
  }  
  .wrap{
  	width: 100px;
  	height: 100px;  	
  	border: 1px solid #000;
  	margin: 3.125em auto;  	
  	display: flex;
  	justify-content: center;
  	align-items: center;

  }
  .in{  	
  	width: 10px;
  	height: 10px;
  	background: #000;
  	border-radius: 50%;
  }
  </style>
</head>
<body>  
  <div class="wrap">
  	<div class="in"></div>
  </div>
</body>
</html>

其中3.125em=50px;因为em是相对于父容器设置的长度单位，而浏览器默认的字体大小为16px，所以此时1em=16px，即3.125em=3.125 * 16=50px;

display:flex; 设置.wrap为弹性布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

程序运行结果：