調整位置絕對div到中間？

我有一個父div和一個子div。子div有position: absolute屬性。它已經居中，但我想將它對齊到父div的中間。我該如何去做呢？這裏是我的jsFiddle 調整位置絕對div到中間？

HTML

<div id='parent'> 
    <div id='child'> 

    </div> 
</div>

CSS

#parent { 
    position: relative; 
    width: 500px; 
    height: 300px; 
    background-color: red; 
} 

#child { 
    position: absolute; 
    width: 70px; 
    height: 70px; 
    background-color: blue; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    border-radius: 50%; 
}

來源

2017-04-18 user2896120

[CSS中心的文本（水平和垂直）一個DIV塊中的可能的複製]（http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block） – Rob

解決的辦法是對孩子的div使用transform: translate(-50%, -50%)，就像這樣：

#child { 
    position: absolute; 
    width: 70px; 
    height: 70px; 
    background-color: blue; 
    left: 50%; 
    top: 50%; 
    border-radius: 50%; 
    transform: translate(-50%, -50%); 
}

https://jsfiddle.net/jwoy7rxr/

這是有效的，因爲變換基於來自其自己的起點的百分比定位項目。

來源

2017-04-18 18:30:09 Toby

非常感謝您的回答！有了transform屬性，它是否適用於大多數現代瀏覽器？ – user2896120

支持相當不錯：[caniuse.com]（http://caniuse.com/#feat=transforms2d） – Toby

支持它很好 - 但您需要使用autoprefixer或手動添加供應商前綴。 – sheriffderek

由於父級具有基於px的高度，因此可以安全地使用簡單的頂部和底部邊距來使元素居中。

#parent { 
    position: relative; 
    width: 500px; 
    height: 300px; 
    background-color: red; 
} 

#child { 
    position: absolute; 
    width: 70px; 
    height: 70px; 
    background-color: blue; 
    left: 0; 
    right: 0; 
    margin: 115px auto; 
    border-radius: 50%; 
}

這裏的小提琴：https://jsfiddle.net/Lr3fLser/

來源

2017-04-18 18:35:48

你需要給父：

#parent { 
    width: 500px; 
    height: 500px; 
    background-color: red; 
    display: table-cell; 
    vertical-align: middle; 
} 

#child { 
    width: 70px; 
    height: 70px; 
    background-color: blue; 
    border-radius: 50%; 
}

你需要顯示錶單元格，以使用垂直對齊。

然後加入align="center"父div的：

<div align="center" id="parent"> 
    <div id='child'> 

    </div> 
</div>

我有更新的jsfiddle附：

https://jsfiddle.net/o7pzvtj3/2/

來源

2017-04-18 18:57:30

調整位置絕對div到中間？

回答

相關問題