第一：在页面中使用 margin: 0 auto;居中；

<div>

　　<p>夜屋</p>

</div>

div {

　　width: 100%;

　　position: relative;

　　background-color: red;

}

p {

　　width: 800px;

　　margin: 0 auto;

　　background-color: #ccc;

}

第二：在页面中使用 left 及margin-left；

<style type="text/css">

*{

　　padding: 0px;

　　margin: 0px;

}

.wrap{

　　width:400px;

　　height:300px;

　　margin:10px;

　　border:1px solid #000;

}

.centerDiv{

　　display: block;

　　width:200px;

　　height:200px;

　　background-color:#69F;

　　top:50%;

　　left:50%;

　　margin:-100px 0 0 -100px;

}

</style>

<div class="wrap">

　　<div class="centerDiv">上下左右居中方法2</div>

</div>

 

 

 注意：需要垂直并且水平居中的元素必须是div，其他p类等块级元素用此方法不会居中（垂直和水平居中），若是用了非div元素，显示如下；

<div class="wrap"> 

　　<p class="centerDiv">上下左右居中方法2</p> 

</div>

 第三、图片的垂直居中，使用display: table-cell;

div {

　　width: 289px;

　　height: 1000px;

　　display: table-cell;

　　vertical-align: middle;

　　background-color: Gray;

}

<div>

　　<img src="../images/canvas.jpg" width="333" height="500">

</div>