CSS：在X和Y中心元素

比方說，我有一個HTML文檔中的一個div的絕對位置，就像這樣：CSS：在X和Y中心元素

<div style="position:absolute">Hello!</div>

現在讓我們說，我想給它一個X和Y （可能通過JQuery，爲我的目的）。這很簡單，只需將「left」和「top」屬性分別設置爲X和Y即可。

然而，當X和Y成爲這個div的中心時，這個任務會變得更加困難。如果div的大小並不總是保證相同，則不能將X和Y抵消到合適的金額。

如果可能，如何將div的中心設置爲特定的X和Y？如果它有幫助，這些div只會包含文本，不包含子元素。

我寧願使用CSS而不是JavaScript，但如果這是必要的，我會好的。

來源

2015-10-18 Blake Doeren

是要求中心'div'在視口中？ – guest271314

那麼你可以通過計算：'childDiv.left = parentDiv.width/2 - childDiv.width/2'和'childDiv.top = parentDiv.height/2 - childDiv.height/2'來找到中心座標。 –

_「如果div的大小並不總是保證相同，那麼不能只將X和Y抵消到恰當的量」_ - 爲什麼不呢？如果您打算使用JS，那麼您可以簡單地獲取元素的當前寬度和高度，然後執行非常簡單的數學運算。使用（+/-）50％左右的margin-top/-left也可以作爲純粹的CSS解決方案。 – CBroe

兩種方式居中div垂直和水平：

方法1：絕對定位

#box { 
    position: absolute; 
    left: 50%; /* relative to nearest positioned ancestor or body element */ 
    top: 50%; /* relative to nearest positioned ancestor or body element */ 
    transform: translate(-50%, -50%); /* relative to element's height & width */ 
}

DEMO：http://jsfiddle.net/19pu1g72/

方法2：Flexbox的

body { 
    display: flex; /* establish flex container */ 
    justify-content: center; /* center flex items horizontally, in this case */ 
    align-items: center; /* center flex items vertically, in this case */ 
}

DEMO：http://jsfiddle.net/19pu1g72/1/

來源

2015-10-18 02:03:10

不知道爲什麼你編輯了第一種方法，因爲translate（-50％，-50％）完全按照我的意願工作。我認爲你誤解了我的問題，所以如果有必要，我會進一步解釋。我希望Left和Top可變，不一定是50％。如果你編輯你的答案來反映這一點，我會接受它。 –

我沒有更改代碼。只是添加了解釋說明。 –

看來你搞砸了評論，因爲你評論了一部分。 –

嘗試使用calc()，設置left到50% - /* element width *//2，top到50% - /* element height *//2

div { 
 
    width:100px; 
 
    height:24px; 
 
    top:calc(50% - 24px/2); 
 
    left:calc(50% - 100px/2); 
 
}

<div style="position:absolute">Hello!</div>

來源

2015-10-18 02:05:28 guest271314

還提到'calc（）'的支持 – Rayon

請參閱'calc' https://developer.mozilla.org/en-US/docs/Web/CSS/calc – guest271314

這是一個合法的解決方案，如果您知道確切的大小的div。問題是我不一定知道div的確切大小，所以需要一個不同的方法。被接受的答案使用了'translate（-50％，-50％）'，這是我想要的 –

CSS：在X和Y中心元素

回答

相關問題