如果我们想使用flex实现垂直且居中效果,需要使用到2个flex属性,分别是justify-content、align-items。

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>全栈攻城狮网:http://www.quanzhangongchengshi.com/</title>
		<style>
			.father {
				height: 400px;
				width: 400px;
				border: 1px solid black;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
				justify-content: center;
				align-items: center;
			}

			.son {
				height: 25%;
				width: 25%;
				box-sizing: border-box;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>



点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部
{__SCRIPT__}