引荐视频教程：css视频教程
起首，我们先写一个HTML文件，应用css完成多行内容垂直居中。
<div class="wrap">
<div class="content">
<h1>hello world</h1>
<h2>HELLO WORLD</h2>
<h3>层叠样式表</h3>
</div>
</div>
接下来我们运用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完成子元素垂直居中
<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属性细致引见（附示例）的细致内容，更多请关注ki4网别的相干文章！
