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>