HTML:css定位的类型及其设置水平居中的方法

心碎南瓜粥

于 2022-07-26 15:27:01 发布

阅读量111

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/zhouzhou20002000/article/details/125995399

版权

本文探讨了网页布局中的四种基本定位方式：静态定位、相对定位、绝对定位和固定定位，以及如何实现元素水平垂直居中。介绍了各定位方式的特点，并提供实例说明如何使用margin、box-sizing和子元素绝对定位来达成居中效果。

摘要由CSDN通过智能技术生成

定位有哪些?区别又是什么？

**0.静态定位 static**
特点:默认文档流定位

**1.相对定位 relative** 
特点:不脱离文档流 相对于自身在浏览器中的位置定位

**2.绝对定位 absolute**
特点:1.脱离文档流 原先位置不保留
	2.默认定位元素，无论有没有祖先元素，相对于body定位
	3.祖先元素设置了定位,相对于祖先元素定位（就近原则）
	
**3.固定定位 fixed**
	特点:1.脱离文档流 原先位置不保留
			2.相对于浏览器视口区域
			
**4.粘滞定位 sticky top:20px**
	特点:1.不脱离文档流 
	2.没有达到阈值前相对定位
	达到阈值就是固定定位

2.如何设置水平垂直居中?

1.给父元素设置border,给子元素设置margin:width/2;
2.给父元素设置box-sizing:border-box padding:width/2;
3.子绝父相（子元素绝对定位，父元素相对定位）,给子元素设置top,left,bottom,right全部为0,margin:auto;
4.子绝父相,给子元素设置top:50%,left:50%,margin-left:-width/2,margin-top:-height/2;