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

最新推荐文章于 2023-02-17 23:23:13 发布

jasmine_qiqi

最新推荐文章于 2023-02-17 23:23:13 发布

阅读量698

点赞数

分类专栏： CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_45065754/article/details/124387947

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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>