已知一个盒子的宽高
.d1{
height:200px;
width:200px;
background: #EAADEA;
position: relative;/*相对定位*/
}
.d2{
width:50px;
height:50px;
background: #DB7083;
position: absolute;/*绝对定位,相对于父元素的定位*/
top:50%;
left:50%;
margin-top:-25px;/*减去d2盒子一半的高*/
margin-left:-25px;/*减去d2盒子一半的宽*/
}
如果不减去的话效果如图:
不知道一个盒子的宽高
.d1{
height:200px;
width:200px;
background: #EAADEA;
position: relative;/*相对定位*/
}
.d2{
background: #DB7083;
position: absolute;/*绝对定位,相对于父元素的定位*/
top:30%;/*上边距的百分比*/
left:20%;/*左边距的百分比*/
right:20%;/*右边距的百分比*/
bottom:30%;/*下边距的百分比*/
}
绝对定位结合margin: auto,不需要提前知道尺寸,兼容性好。这个也是比较推荐的一种方式
.container {
position: relative;
height: 300px;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
js写法
var box=document.querySelector('.box')
my()
window.onresize=function(){
my()
}
function my(){
var x=document.documentElement.clientWidth;
var y=document.documentElement.clientHeight;
box.style.left=x/2-(box.offsetWidth/2)+'px';
//可视区域的宽度/2-盒子本身的一半
box.style.top=y/2-(box.offsetHeight/2)+'px';
}