文本對齊：中心和邊距：0自動不在絕對定位元素

Question

我想對齊在中心的div，但文字對齊：中心，也沒有邊距：0自動，似乎工作在絕對定位元素。我不假設絕對定位元素。在這種情況下，我應該怎麼做呢？

#wrap { 
 
    border: 1px solid black; 
 
    position: relative; 
 
    width: 500px; 
 
    height: 250px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
#absolute { 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    display: block; 
 
    bottom: 0; 
 
    margin: 0 auto; 
 
    cursor: pointer; 
 
}

<div id='wrap'> 
 
    <div id='absolute'>Click Me</div> 
 
</div>

Answer 1

在不更改HTML的情況下，水平居中元素的最簡單方法是組合left: 50%和transform: translateX(-50%)。這將基本上將元素50%定位在右側，然後通過向左變換-50%來替換元素寬度的一半。這樣做時，元素將水平居中，無論寬度如何，這意味着您不需要對任何值進行硬編碼。

position: absolute; 
left: 50%; 
transform: translateX(-50%); 

更新的摘要：

#wrap { 
 
    border: 1px solid black; 
 
    position: relative; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    height: 80px; 
 
} 
 
#absolute { 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    bottom: 0; 
 
    cursor: pointer; 
 
}

<div id="wrap"> 
 
    <div id="absolute">Click Me</div> 
 
</div>

另外，如果你可以改變HTML，只需添加left: 0和right: 0的絕對定位的元素元素，以便其採取父容器的寬度。然後，你可以爲了增加text-align: center居中子元素：

更新的摘要：

#wrap { 
 
    border: 1px solid black; 
 
    position: relative; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    height: 80px; 
 
} 
 
#absolute { 
 
    position: absolute; 
 
    left: 0; right: 0; 
 
    bottom: 0; 
 
    text-align: center; 
 
} 
 
#absolute > span { 
 
    border: 1px solid red; 
 
    cursor: pointer; 
 
}

<div id="wrap"> 
 
    <div id="absolute"> 
 
    <span>Click Me</span> 
 
    </div> 
 
</div>

Answer 2

你既然知道包裝的大小，你可以添加left: 250px（包裝尺寸的一半），以您的絕對定位元素的CSS。