一个子元素在父元素中的水平垂直居中的实现方式_js实现子级元素在父级元素中水平垂直居中-优快云博客

本文链接：https://blog.youkuaiyun.com/adminstate/article/details/142364317

文章目录

方式一
方式二

方式一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一个子元素在父元素中的水平垂直居中的实现方式一·</title>
		<style>
			.fu {
				height: 500px;
				width: 600px;
				background-color: #ff0;
				position: relative;
			}
			.zi {
				width: 100px;
				height: 100px;
				background-color: #f00;
				/* 子绝父相 */
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="fu">
			<div class="zi"></div>
		</div>
	</body>
</html>

关键代码是：

top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

当子元素zi指定了宽和高后，top: 0; bottom: 0; left: 0; right: 0;的设置并不会使zi元素在父元素的空间内进行伸展，但也不是没有真正的作用。当top: 0; bottom: 0; left: 0; right: 0;为零时。此时会使margin: auto;在竖直方向上自动均分上下外间距生效
在这里插入图片描述

方式二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一个子元素在父元素中的水平垂直居中的实现方式二</title>
		<style>
			.fu {
				height: 500px;
				width: 600px;
				background-color: #ff0;
				position: relative;
			}
			.zi {
				width: 100px;
				height: 100px;
				background-color: #00f;
				/* 子绝父相 距离父级的顶部 左侧 参照物与长度说的是父级 */
				position: absolute;
				top: 50%;
				left: 50%; /* 到这里把子元素的原点移动到父元素的中心点 */
				/* 子元素回正，将父子元素的中心点重合 */
				/* 位移函数使用百分比值，移动的长度是自己的50% */
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="fu">
			<div class="zi"></div>
		</div>
	</body>
</html>