div水平垂直居中

在写前端页面时，常常需要居中一个块级元素，如div的居中。水平居中只需margin:auto;一行代码即可，那么，如何才能使得div在父块级元素中同时水平、垂直居中呢？

开始之前，大家应该充分理解css中绝对定位和相对定位的概念

这篇博文写得非常好：CSS相对定位和绝对定位详解

在此补充一下，当div使用绝对定位时（position:absolute），会往上查找祖先元素，直到某个祖先元素有position属性且值为relative或position，然后以祖先元素的左上角为基点，再设置top，right，bottom，left属性。具体解释可查看上面链接。

看下简陋的最终效果：

 

实现思路

1.使用绝对定位，相对对位功能，使得子div左上角的点位于父div的中心

2.使用transform属性使子div向左上角编译长宽一半的距离

 

实现代码及注释

<!DOCTYPE html>
<html>
<head>
	<title>
		div	
	</title>
	<style type="text/css">
		.div1 {
			background-color: gray; /* 父div背景色 */
			height: 500px; 
			width: 600px;
			margin: auto;
			position: relative; 
		}

		.div2 {
			background-color: red;
			height: 200px;
			width: 200px;
			position: absolute; /* 当父div设置了相对对位后，这里再设置绝对定位，即可另子div相对于父div定位 */
			top: 50%; /* top,left是与绝对定位配套的属性，以div左上角为动点，令它距离父div顶端和左端长度一半 */
			left: 50%;
			/** 
				专注于div2左上角的点，可看作以它为原点建立直角坐标系（x轴正方向向右，y轴正方向向下），
				然后div2先向左移动自身宽度一半的距离（从-50%看出），再向上移动自身宽度一半的距离 
			*/
			transform: translate(-50%,-50%); 

		}

	</style>

</head>

<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
</body>
</html>

 

posted @ 2020-06-15 14:47  JonnyOu1012  阅读(37)  评论(0)    收藏  举报