html页面中块级元素的居中

第一：在页面中使用 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>

 

 

转载于:https://www.cnblogs.com/txtyewu/p/5945880.html