16、实现水平垂直的三种方法(flex、grid、transform)

  • 1、flex布局：justify-content水平居中，align-items垂直居中
  • 2、grid布局：justify-content水平居中，align-items垂直居中
  • 3、relative+absolute+top+left+transform

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<style>
	body {
		display: flex;
		/* 水平方向：两端对齐，间隔相等 */
		justify-content: space-around;
	}

	.case1,
	.case2,
	.case3 {
		height: 300px;
		width: 300px;
		border: 1px solid black;
	}

	/* 1、flex布局 */
	.case1 {
		display: flex;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		align-items: center;
	}

	/* 2、grid布局 */
	.case2 {
		display: grid;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		align-items: center;
	}

	/* 3、absolute、transform */
	.case3 {
		position: relative;
	}

	.case3 .child {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>

<body>
	<!-- 1、flex布局 -->
	<div class="case1">
		<div>
			<h1>flex布局居中</h1>
			<ul>
				<li>兼容IE9以上</li>
				<li>适合一行一列</li>
			</ul>
		</div>
	</div>
	<!-- 2、grid布局 -->
	<div class="case2">
		<div>
			<h1>grid布局居中</h1>
			<ul>
				<li>兼容IE9以上</li>
				<li>适合多行多列</li>
			</ul>
		</div>
	</div>
	<!-- 3、absolute、transform -->
	<div class="case3">
		<div class="child">
			<h1>absolute、transform</h1>
			<ul>
				<li>相对定位、绝对定位</li>
				<li>子元素top、left、translate</li>
			</ul>
		</div>
	</div>
</body>

</html>
版权声明：本文为weixin_45065754原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。