中心绝对定位元素在CSS自己的位置属性

我想中心一个绝对定位的div（或其他html元素）在它自己的顶部和左侧属性与CSS如果可能的话。默认情况下，绝对定位的元素会将其左上角与顶部和左侧属性对齐。请参阅下面其中的灰色框是相对定位容器和红点是蓝色div的页面上的CSS位置（top: 0; left:0;）图：中心绝对定位元素在CSS自己的位置属性

我想知道什么是最好的选择就是将蓝色div对准自己的位置，就像下面的页面上的鲑鱼色的div一样。如果可能，我想以百分比而不是像素为单位。

到目前为止，我只想出了一个JavaScript解决方案。这是计算孩子相对于父母的width，然后从left的位置减去该百分比的一半。然后做同样的height和顶部的位置。见段...

//put elements in variables 
 
var container = document.getElementById('main-box'); 
 
var div = document.getElementById('center-on-pos'); 
 

 
//get top and left in div position percentages relative to container 
 
var div_top = (div.offsetTop/container.offsetHeight) * 100; 
 
var div_left = (div.offsetLeft/container.offsetWidth) * 100; 
 

 
//calculate how much we need to shift 
 
var offset_top_pos = ((div.offsetWidth/container.offsetWidth) * 100)/2; 
 
var offset_left_pos = ((div.offsetHeight/container.offsetHeight) * 100)/2; 
 

 
//shift div 
 
div.style.top = (div_top - offset_top_pos) + '%'; 
 
div.style.left = (div_left - offset_left_pos) + '%';

body{ padding:85px; } 
 

 
.container{ 
 
    background-color:rgba(0,0,0,.2); 
 
    width:500px; 
 
    height:500px; 
 
    position:relative; 
 
} 
 

 
.container > div{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:rgba(255,0,0,.5); 
 
}

<div id="main-box" class="container"> 
 
    <div id="center-on-pos"></div> 
 
</div>

来源

2016-05-02 tnschmidt

您可以使用transform: translate(-50%, -50%)

body { 
 
    padding: 85px; 
 
} 
 
.container { 
 
    background-color: rgba(0, 0, 0, .2); 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
} 
 
.container > div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: rgba(255, 0, 0, .5); 
 
    transform: translate(-50%, -50%); 
 
}

<div id="main-box" class="container"> 
 
    <div id="center-on-pos"></div> 
 
</div>

来源

2016-05-02 23:22:57

妈的，这是如此之快！：P我有相同的https://jsfiddle.net/y1cbzvk2/1/ –

完美！ @Nadad Vracar，只是好奇，不认为有一种方式，但没有CSS3可能吗？ – tnschmidt

@tnschmidt如果它有一个已知的大小，那么负边界将做:)'margin-top：-50px; margin-left：-50px'或者只是负的坐标：'left：-50px; top：-50px;' –

要仅使用负百分比值，你需要一个额外的容器，这样子的父母是相同的大小。

body { 
 
    padding: 85px; 
 
} 
 
.container { 
 
    background-color: rgba(0, 0, 0, .2); 
 
    width: 400px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 
.container > div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    } 
 
.abst>div { 
 
    margin:-50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: rgba(255, 0, 0, .5); 
 
}

<div id="main-box" class="container"> 
 
    <div class="abst"><div id="center-on-pos"></div></div> 
 
</div>

来源

2016-05-02 23:48:10

中心绝对定位元素在CSS自己的位置属性

回答

相关问题