注意容器必须是块级元素并且有宽度时候支持这个属性。
垂直居中设置div的行高，比如你的DIV容器高度是height：22px，那么你设置line-height：22px这样你的文字就会垂直居中了
祝你好运！
如果要实现整个页面的水平居中，设置容器的左右margin:auto，前提是你的容器宽度比页面屏幕显示区域宽度小。
网页设计中的css盒子内容居中，你可以先写2个div,第一个包裹着第二个，然后在设置第一个的宽高，在通过margin：0 auto；居中就行，margin的意思就是距离浏览器的外边距，如图:
这里我写段代码：
<html>
<head>
<title>网页居中</title>
</head>
<style>
#div1{
widrh:960px
height:700px
mrgin:0 auto
}
#div2{
widrh:660px
height:300px
mrgin:0 auto
}
</style>
<body>
<div id='div1'>
<div id='div2'>
<p>内容居中文字</p>
</div>
</div>
</body>
</html>
写个简单的例子给你吧
htlm如下：
<h4>图片水平居中</h4>
<div class="demo1">
<img src="你的图片" alt="">
</div>
<h4>图片垂直居中</h4>
<div class="demo2">
<div class="imgbox">
<img src="你的图片" alt="">
</div>
</div>
<h4>图片水平垂直居中</h4>
<div class="demo3">
<div class="imgbox">
<img src="你的图片" alt="">
</div>
</div>
css如下：
<style type="text/css">
.demo1{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: inline-blocktext-align: center}
.demo1 img{width: 100pxheight: auto}
.demo2{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: table}
.demo2 .imgbox{display: table-cellvertical-align: middle}
.demo2 .imgbox img{width: 100pxheight: auto}
.demo3{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: table}
.demo3 .imgbox{display: table-cellvertical-align: middletext-align: center}
.demo3 .imgbox img{width: 100pxheight: auto}
</style>
