在运用css给页面进行排版美化的历程中，时常会用到pposition属性。那么，接下来我们就细致介绍一下position属性。 前言：在运用css给页面进行排版美化的历程中，时常会用到pposition属性。那么，接下来我们就细致介绍一下position属性。

举荐视频教程：css视频教程

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

    
    
hello world
    
HELLO WORLD
    
层叠样式表
    

接下来我们运用css进行布局排版：

.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实现子元素垂直居中

.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属性细致介绍（附示例）的细致内容，更多请关注 百分百源码网 其它相干文章！