CSS 定位position属性详细介绍（附示例）

推荐视频教程：css视频教程

首先，我们先写一个HTML文件，利用css实现多行内容垂直居中。

<div class="wrap">     <div class="content">     <h1>hello world</h1>     <h2>HELLO WORLD</h2>     <h3>层叠样式表</h3>     </div> </div>

.wrap{ width:100%; height:400px; display:table; } .content{ display:table-cell; vertical-align:table; text-align:center; }

position属性：

一、静态定位/常规定位/自然定位static

作用：使元素定位于自然流中

特点：

1、忽略top、bottom、left、right或者z-index声明

2、两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的

3、具有固定width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大到占满剩余宽度，造成的效果就是这个块水平居中

二、 相对定位relative

作用：使元素成为可定位的祖先元素

特点：

1、可以使用top/right/bottom/left/z-index进行相对定位，相对元素在自然流中的位置

2、相对定位的元素在自然流中的位置会被保留

3、任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位

4、可以使浮动元素发生偏移（解决两个浮动元素设置t/r/b/l无效的问题），并控制它们的堆叠顺序

三、绝对定位absolute

作用：使元素脱离自然流

特点：

1、脱离自然流

2、设置尺寸的百分比比的是最近可定位的祖先元素

3、lrtb如果设置为0，它将对齐到最近可定位祖先元素的各边（衍生水平垂直居中妙计）

4、如果没有最近可定位祖先元素，会认作为可定位祖先元素

5、z-index可以控制堆叠顺序

四、 固定定位fixed

作用：和绝对定位作用相似

特点：

1、相对于浏览器视口定位

2、固定定位元素不会随着视口滚动而滚动

3、继承absolue的特点

利用position实现子元素垂直居中

<div class="wrap">     <div class=""content></div> </div>

.wrap { 	width: 200px; 	height: 200px; 	background: blue; 	position: relative; } .content { 	width: 100px; 	height: 100px; 	background: red; 	position: absolute; 	top: 0; 	bottom: 0; 	left: 0; 	right: 0; 	margin: auto auto; }

以上就是CSS 定位position属性详细介绍（附示例）的详细内容，更多内容请关注技术你好其它相关文章！