Html水平和垂直居中。
最近在中心遇到了很多问题，所以花了点时间总结了一下，放在这里，方便我以后查找。0.0 ~
1。居中文本。
1 2我在中间...3
1.1.高度+行高+文本居中(仅单中心线)
1 .wrap{2宽度:200px3身高:200px4边框:1px纯红；5文本对齐:居中；6行高:200px7 }
ps:text-align:center只是将元素下面的内联元素居中显示1.2显示:表格单元格(多行固定高度居中)
1 .wrap{2宽度:200px3身高:200px4边框:1px纯红；5文本对齐:居中；6显示器:表格单元；7垂直对齐:居中；8 }
display:table-cell：ie67不管用,最好配合display:table;一起用ie67下：（以后也不用了，不过也放这儿吧）方法一：（通过em标签高度与父级等高，所以span和em居中就相当于span在父级居中）1 2 3我在中间…我在中间…我在中间…我在中间…我在中间… 4 5 6。
1 .wrap{ 2宽度:200px3身高:200px4边框:1px纯红；5文本对齐:居中；6 } 7 .wrap span{ 8垂直对齐:中间；9显示:内嵌-块；10宽度:180px11 }12 .wrap em{13高度:100%；14垂直对齐:中间；15显示器:直插式块；16 }
方法二：（通过给子元素增加一个绝对定位的父级标签，再配合子元素的相对定位水平垂直居中）1 2 3我在中间…我在中间…我在中间…我在中间…我在中间… 4 5。
1 .wrap{ 2宽度:200px3身高:200px4边框:1px纯红；5显示:表格；6位置:相对；7溢出:隐藏；8 } 9 .wrap .span1{10 display:表格单元格；11垂直对齐:居中；12文本对齐:居中；13 *位置:绝对；14顶:50%；15左:50%；16 }17 .wrap .span2{18 *position:相对；19顶:-50%；20左:-50%；21 }
1.3添加(填充，不用说了)
1 .wrap{2宽度:200px3边框:1px纯红；4填充:50px 0；5 }
2.中心元素
1 2 3
2.1position:绝对+边距+边距负值(计算边距必须有宽度和高度)。
1 .wrap{ 2宽度:200px3身高:200px4位置:绝对；5顶:50%；6左:50%；7边距-顶部:-101 px；8左边距:-101 px；9边框:1px纯红；10 }11 .wrap span{ 12宽度:80px13身高:80px14背景:红色；15位置:绝对；16顶:50%；17左:50%；18页边距-顶部:-40px；19页边距-左侧:-40px；20 }
ps:position:absolute/fixed使内嵌支持宽高2.2位置:绝对+边距:自动
1 .wrap{ 2宽度:200px3身高:200px4位置:绝对；5顶:50%；6左:50%；7边距-顶部:-101 px；8左边距:-101 px；9边框:1px纯红；10 }11 .wrap span{ 12宽度:80px13身高:80px14背景:红色；15位置:绝对；16顶:0；17右:0；18底:0；19左:0；20保证金:自动；21 }
2.3负2.3位置
1 2 3 fds4 5
1 .wrap{ 2宽度:200px3身高:200px4位置:绝对；5顶:50%；6左:50%；7边距-顶部:-101 px；8左边距:-101 px；9边框:1px纯红；10 }11 .wrap .span1{12位置:绝对；13顶:50%；14左:50%；15宽度:80px16身高:80px17 }18 .wrap . span 2 { 19 width:80px；20高度:80px21显示器:block22行高:80px23文本对齐:居中；24背景:红色；25位置:相对；26顶:-50%；27左:-50%；28 }
2.4transform: translate(-50%，-50%)；(translate是从自身偏移的，不考虑兼容性的话，这个方法很好。)
1 2 3号油气开发船
1 .wrap{ 2宽度:200px3身高:200px4位置:绝对；5顶:50%；6左:50%；7边距-顶部:-101 px；8左边距:-101 px；9边框:1px纯红；10 }11 .wrap span{ 12宽度:80px13身高:80px14背景:红色；15位置:绝对；16顶:50%；左:50%；17-WebKit-transform:translate(-50%，-50%)；18 -ms-transform: translate(-50%，-50%)；19 -o-transform: translate(-50%，-50%)；20 transform: translate(-50%，-50%)；21 }
2.5平行一个标签
1 2 3 4
1 .wrap{ 2宽度:200px3身高:200px4位置:绝对；5顶:50%；6左:50%；7边距-顶部:-101 px；8左边距:-101 px；9边框:1px纯红；10文本对齐:居中；11 }12 .wrap span{13宽度:80px14高度:80px15背景:红色；16显示器:直插式块；17垂直对齐:中间；18 } 19 .wrap em{20高度:100%；21垂直对齐:中间；22显示器:直插式模块；23 }
2.6显示:表格和显示:表格单元
1 2 3 4 5
1 .wrap{ 2宽度:200px3身高:200px4位置:绝对；5顶:50%；6左:50%；7边距-顶部:-101 px；8左边距:-101 px；9边框:1px纯红；10显示:表格；11 }12 .wrap div { 13 display:table-cell；14垂直对齐:中间；15文本对齐:居中；16 }17 .wrap span{ 18宽度:80px19身高:80px20背景:红色；21显示器:直插式模块；22 }
2.7显示屏:盒子
1 2 3号油气开发船
1 .wrap{ 2宽度:200px3身高:200px4位置:绝对；5顶:50%；6左:50%；7边距-顶部:-101 px；8左边距:-101 px；9边框:1px纯红；10显示器:-WebKit-box；11 -webkit-box-pack:中心；12-WebKit-box-align:center；13 }14 .wrap span{15宽度:80px16身高:80px17背景:红色；18显示器:block19 }
3.中心浮动元素
1 2 3 fdasfd4