网页布局水平垂直技术
对于水平垂直居中的总结：
实现提供如下布局代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<style>
*{
margin:0;
padding:0;
}
.parBar{
position:relative;
width:32em;
height:32em;
margin:4em auto;
border:1px solid red;
}
.parBar .subBar{
width:13em;
height:13em;
border:1px solid black;
}
</style>
</head>
<body>
<div class="parBar">
<div class="subBar"></div>
</div>
</body>
</html>
第一种居中方式：
CSS绝对定位，对子元素增加如下代码：
.align-center{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
第二种居中方式：
依旧是CSS绝对定位，代码如下：
<span style="font-family:Courier New;">.align-center{
position:absolute;
top:50%;
left:50%;
margin-top:-6.5em;
margin-left:-6.5em;
}</span>
第三种居中方式：
利用JQ或者JS代码，在将子元素对于这个父类元素的高宽进行居中设置，这是非常简单的数学计算，本处就不再过多提及。
第四种居中方式：
CSS绝对定位和相对位移，其中用到translate属性，如果大家做过3D效果的网页的话，这个东西便是再熟悉不过了。(不需要固定高度)
代码如下：
<span style="font-family:Courier New;">.align-center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
/*横坐标,纵坐标*/
}</span>
到此，大家可能就注意到了，这几个都包含一个元素设定那就是position:absolute/fixed,问题来了，如果没有这个属性怎么办呢？
第一种方式运用display:table-cell;
网页代码再次进行修改如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<style>
*{
margin:0;
padding:0;
}
.parBar{
position:relative;
width:32em;
height:32em;
margin:4em auto;
border:1px solid red;
}
.parBar .subBar{
width:13em;
height:13em;
border:1px solid black;
}
.parBar .sub2Bar{
width:6em;
height:6em;
border:1px solid black;
margin:auto;
}
</style>
</head>
<body>
<div class="parBar ">
<div class="subBar">
<div class="sub2Bar"></div>
</div>
</div>
</body>
</html>
垂直居中必须注意如下几条：
.align-center{
display: table-cell;
vertical-align:middle;
}
如上align-center样式必须加在父类上，同时他们的子元素想要水平居中的话比如使用margin:auto;属性。
效果如下：
第二种方法：
运用display:-webkit-box
代码如下：
.align-center{
display: -webkit-box;
-webkit-pox-pack:center;
-webkit-box-align:center;
}
此样式的使用和上面那种样式是一样的。
第三种方法：
:after,:before的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<style>
*{
margin:0;
padding:0;
}
.parBar{
position:relative;
width:32em;
height:32em;
margin:4em auto;
border:1px solid red;
}
.parBar .subBar{
width:13em;
height:13em;
border:1px solid black;
text-align:center;
}
.parBar .sub2Bar{
width:6em;
height:6em;
border:1px solid black;
display: inline-block;
vertical-align: middle;
}
.align-center:before{
height:100%;
content:'';
display: inline-block;
vertical-align: middle;
}
.align-center:after{
height:100%;
content:'';
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parBar">
<div class="subBar align-center">
<div class="sub2Bar "></div>
</div>
</div>
</body>
</html>
其中.align-center也是针对于父类而言的同时父类必须同时设定:after和:before否则子类元素只是竖直方向居中水平方向是没有居中的，子类元素要居中必须是行内元素display:inline-block;否则子类元素是无法居中的。