一 水平居中
水平居中问题和浏览器的宽度及分辨率密切相关。
1 使用水平居中属性定义水平居中
水平居中的问题一般出现在块元素中。因为内联元素无法定义宽度和高度属性。使用水平居中属性（text-align）可以定义元素的内容水平居中显示。
text-align:center;在IE高级版本和非IE浏览器中只是让元素内内容居中显示，如果要整理居中需要用到margin:auto
IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
<style>
div{
text-align:center;
500px;
height:200px;
background:#666666;
border:4px solid #000000;
}
p{
height:100px;
200px;
background:#999999;
border:1px solid #000000;
}
</style>
<div>
<p>这里是需要居中的内容</p>
</div>
2 使用边界属性定义水平居中
定义子元素水平居中，可以将左右两边的边界属定义为auto，用自动补入的边界距离来控制元素的居中显示。
<style>
div{
//margin:0 auto;
400px;
height:200px;
border:1px solid red;
}
p{
margin:0 auto;
height:100px;
200px;
border:1px solid blue;
}
</style>
<div>
<p>这里是需要居中的内容</p>
</div>
二 垂直居中
1 容器和内容大小固定的垂直居中
在定义子元素垂直居中时候，如果父元素和子元素大小确定，则可以使用两个元素的补白、边界或定位属性来定义元素的垂直居中。
a— 使用父元素的补白属性定义垂直居中
<style>
.div1{
padding:50px 0 0;
500px;
height:150px;
border:1px solid red;
}
.div2{
height:100px;
200px;
border:1px solid blue;
}
</style>
<div class="div1">
<div class="div2">这里是需要居中的内容</div>
</div>
b— 使用子元素的边界属性定义垂直居中
<style>
.div1{
500px;
height:200px;
border:1px solid red;
}
.div2{
margin:50px 0 0;
height:100px;
200px;
border:1px solid blue;
}
</style>
<div class="div1">
<div class="div2">这里是需要居中的内容</div>
</div>
c— 使用子元素的定位属性定义垂直居中
<style>
.div1{
500px;
height:200px;
border:1px solid red;
}
.div2{
position:relative;
top:50px;
height:100px;
200px;
border:1px solid blue;
}
</style>
<div class="div1">
<div class="div2">这里是需要居中的内容</div>
</div>
2 内容大小固定的垂直居中
已知子元素大小，想在任何大小的父元素中，子元素都能够垂直居中显示，可以使用相对定位属性和负的边界属性值实现。
由于子元素高度已确定，可以先使用相对定位将子元素定位在父元素高度的50%（此时子元素的上边线与父元素高度的50%处对齐）；再在子元素中定义负的上边界属性，属性值为子元素高度的一半。
<style>
.div1{
500px;
height:200px;
border:1px solid red;
}
.div2{
position:relative;
top:50%;
margin-top:-50px;
height:100px;
200px;
border:1px solid blue;
}
</style>
<div class="div1">
<div class="div2">这里是需要居中的内容</div>
</div>
3 容器大小固定的垂直居中
当父元素大小固定时候，若子元素为块元素，则很难实现任何内容都能够垂直居中；若子元素为内联元素，则可通过定义行高的方式实现垂直居中。若要精确的控制行高显示，要不断地调整字体大小。
<style>
.div1{
line-height:200px;
font-size:179px;
border:1px solid black;
}
div{
float:left;
250px;
height:200px;
border:1px solid red;
}
img{
height:100px;
vertival-align:middle;
border:1px solid blue;
}
</style>
<div class="div1">
<!-- <div class="div2">这里是需要居中的内容</div> -->
<img src="1.jpg" alt="pic" />
</div>
<div><
/div>
4 容器和内容大小均不固定的垂直居中
<style>
.father{
position:relative;
500px;
height:200px;
border:4px solid red;
}
.in{
position:absolute;
top:50%;
}
.son{
position:relative;
top:-50%;
200px;
height:100px;
border:2px solid blue;
}
</style>
<div class="father">
<div class="in">
<div class="son"></div>
</div>
</div>