使用CSS3的Flex属性让元素居中

最新推荐文章于 2026-03-31 13:43:58 发布

原创最新推荐文章于 2026-03-31 13:43:58 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，使用CSS的Flex布局来实现居中显示的功能。通过定义一个名为.box的容器类，并设置display为flex，justify-content和align-items均为center，实现了内部元素的水平垂直居中。此外，还定义了一个名为.item的类来展示居中效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.box{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 200px;
	  height: 200px;
	  background-color: #222;
	}
	.item{
	  width: 20px;
	  height: 20px;
	  background-color: #f00;	
	}
	</style>
</head>
<div class="box">
  <span class="item"></span>
</div>
</body>
</html>