中心絕對定位元素在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自己的位置屬性

回答

相關問題