position学习 一种让元素上下和左右居中的方式

  • Post author:
  • Post category:其他



一  position属性



1 absolute


绝对定位



相对于上一级的父元素进行定位,通过“top”,‘right’,‘bottom’,‘left’进行定位;



2 fixed


固定定位



相对于浏览器边界进行定位,通过“top”,‘right’,‘bottom’,‘left’进行定位;





3 relative   相对定位



相对于该元素本来应该在的位置进行定位,通过“top”,‘right’,‘bottom’,‘left’进行定位;但是“top:-20px”是向左移动20px;



一种让元素上下和左右居中的方式


<div id="zong">
</div>


#zong {
	background-color: #ccc;
	width: 400px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -200px;
	margin-top: -100px;
				
	}




版权声明:本文为github_36496793原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。