居中對齊絕對div而不使用左：0，右：0，寬度：100％

-4

如何將absolute div居中而不使用left, right和width:100%？而width應該auto居中對齊絕對div而不使用左：0，右：0，寬度：100％

div{ 
    position: absolute; 
    width: 100%; 
    margin: 0 auto; 
    display: table; 
}

來源

2017-07-05 Manigandaprabu Dhandapani

通常，當不設置「left」和「top」時，由瀏覽器決定這些屬性的初始值。基於此，沒有什麼穩定的方法來完成你所要求的。你可能想解釋爲什麼這些屬性不能被使用？ ... 學校項目？ ...另外，它居中水平，垂直還是兩者？ – LGSon

感謝您的意見，集中在水平，如果寬度：自動;意味着我們可以訪問後端元素，當我們使用左邊的，右邊的屬性，它佔用100％的寬度。 –

不要使用任何父親相對元素，絕對div應該相對於body元素 –

-1

您可以使用margin你的div元素的位置。例如：

margin-left: 50%;

或反之亦然。

編輯：以下是解釋上述文本的片段。我希望它有幫助。

body { 
 
margin: 0; 
 
padding: 0; 
 
background-color: #000; 
 
} 
 

 
h1 { 
 
color: #fff; 
 
margin-top: 100px; 
 
margin-left: 25%; 
 
}

<html> 
 
<body> 
 
<h1>This is an example</h1> 
 
</body> 
 
</html>

來源

2017-07-05 09:50:41

工作片段將對OP – Swellar

有很大的幫助，我希望它有幫助。 –

我認爲'h1'沒有居中 – Swellar

.container { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: #EEE; 
 
} 
 
.answer { 
 
    position: absolute; 
 
    width: auto; 
 
    padding: 10px; 
 
    background-color: #CCC; 
 
    
 
    transform: translate(-50%, -50%); 
 
    margin: 50% 0 0 50%; 
 
}

<div class="container"> 
 
    <div class="answer">absolute</div> 
 
</div>

來源

2017-07-05 09:54:34

感謝您的小節，當答案文字動態增加時，它只會擴展到右側 –

我只是這個中心水平地擇議定書沒有具體說明是否水平居中或垂直

div { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color:blue; 
 
} 
 

 
p { 
 
    position: absolute; 
 
    margin: 0 50%; 
 
    transform:translate(-50%, 0); 
 
    width: auto; 
 
    background-color: red; 
 
}

<div> 
 
    <p> SAMPLE CONTENT </p> 
 
</div>

來源

2017-07-05 09:58:00 Swellar

居中對齊絕對div而不使用左：0，右：0，寬度：100％

回答

相關問題