基础居中布局
.wrap{
1000px;
margin:0 auto;
}
</style>
<div class="nav wrap"></div>
<div class="header wrap"></div>
<div class="footer wrap"></div>
无论屏幕大小多少,都能看到中间的主要内容并居中显示
背景居中
<style>
body{
margin:0;
padding:0;
}
.box{
height:400px;
min-width:1000px;
background-image:图片地址;
background-position:center -80px;
}
</style>
<div class="box">
</div>
有缺点,关键为center
img定位
假设图片大小:1920x高
解释:
向左移动img的一半,向右移动父元素的一半
<style>
body{
margin:0;
padding:0;
}
.box{
overflow:hidden;
}
.box img{
/*向左移动img的一半*/
position:relative;
left:-960px;
/*transform:translate(-50%);*/
/*向右移动父元素(.box)的一半*/
margin-left:50%;
}
</style>
<div class="box">
<img src="图片地址">
</div>