div#thing {
position: absolute;
top: 0px;
z-index: 2;
margin: 0 auto;
}
<div id="thing">
<p>text text text with no fixed size, variable font</p>
</div>
div가 맨 위에 있지만 <center>
또는 중앙에 위치 할 수 없습니다 margin: 0 auto
.
답변
div
다음과 같이 고정 너비를 지정 하면 문제가 해결 될 수 있습니다 .
div#thing {
position: absolute;
top: 0px;
z-index: 2;
width:400px;
margin-left:-200px;
left:50%;
}
답변
div#thing
{
position: absolute;
width:400px;
right: 0;
left: 0;
margin: auto;
}
답변
내가 파티에 늦었다는 건 알지만, 정확한 너비를 모르는 경우 절대 항목을 가로로 배치해야하는 사람들을 위해 여기서 답변을 제공하겠다고 생각했습니다.
이 시도:
// Horizontal example.
div#thing {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
다음과 같이 속성을 조정하기 만하면 수직 정렬이 필요한 경우에도 동일한 기술을 적용 할 수 있습니다.
// Vertical example.
div#thing {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
답변
수직 및 수평으로 중앙에 배치하려면 다음을 수행하십시오.
div#thing {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
답변
상대 너비 (백분율)가 필요한 경우 절대 위치에 div를 래핑 할 수 있습니다.
div#wrapper {
position: absolute;
width: 100%;
text-align: center;
}
요소를 절대적으로 배치하려면 상위 요소를 상대적으로 배치해야합니다.
답변
나는 같은 문제가 있었고 내 한계는 미리 정의 된 너비를 가질 수 없다는 것입니다. 요소의 너비가 고정되지 않은 경우 다음을 시도하십시오.
div#thing
{
position: absolute;
top: 0px;
z-index: 2;
left:0;
right:0;
}
div#thing-body
{
text-align:center;
}
그런 다음 HTML을 다음과 같이 수정하십시오.
<div id="thing">
<div id="thing-child">
<p>text text text with no fixed size, variable font</p>
</div>
</div>
답변
또는 상대 단위를 사용할 수 있습니다.
#thing {
position: absolute;
width: 50vw;
right: 25vw;
}