CSS 布局垂直居中:使用flex和align

最新推荐文章于 2025-10-28 18:55:32 发布

原创最新推荐文章于 2025-10-28 18:55:32 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 CSS 垂直居中 flex

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

布局

13 篇文章

订阅专栏

本文介绍如何使用CSS的Flex布局实现子元素在父元素中的垂直居中显示。通过设置display为flex，justify-content和align-items属性，可以轻松实现元素的垂直居中，适用于网页布局设计。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直居中:使用flex和align</title>
		<style type="text/css">
			.parent{
				display: flex;
				flex-direction: column;
				justify-content: center;
				background-color: red;
				height: 100px;
			}
			.son{
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son">
				测试垂直居中
			</div>
		</div>
	</body>
</html>