position: fixed;동적 너비와 높이로 화면 중앙에 팝업 상자 를 만들고 싶습니다 . 나는 margin: 5% auto;이것을 위해 사용 했다. position: fixed;그것이 없으면 수평으로 잘 가운데에 위치하지만 수직으로는 아닙니다. 를 추가 한 position: fixed;후에도 가로로 가운데에 있지 않습니다.
다음은 완전한 세트입니다.
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>CSS로 화면에서이 상자를 가운데에 배치하려면 어떻게합니까?
답변
당신은 기본적으로 설정해야 top하고 left하는 50%사업부의 왼쪽 상단 모서리를 중심으로하는. 또한 설정해야 margin-top하고 margin-left사업부의 높이와 폭의 부정적인 절반 사업부의 중앙쪽으로 중심을 이동 할 수 있습니다.
따라서 <!DOCTYPE html>(표준 모드)를 제공하면 다음을 수행해야합니다.
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */당신은 수직 및 IE6 / 7 오래된 브라우저를 중심으로 신경 쓰지 않는 경우 또는, 당신은 대신도 추가 할 수 있습니다 left: 0및 right: 0요소에 데 margin-left와 margin-right의 auto고정 위치 요소는 고정 폭을 갖는 그래서 것을 알고 곳의 왼쪽 오른쪽 오프셋이 시작됩니다. 귀하의 경우 따라서 :
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;다시 말하지만 IE에 관심이 있다면 IE8 +에서만 작동하며 세로가 아닌 가로로만 중심에 위치합니다.
답변
동적 너비와 높이로 화면 중앙에 팝업 상자를 만들고 싶습니다.
동적 너비를 가진 요소를 가로로 가운데에 맞추는 현대적인 방법은 다음과 같습니다. 모든 최신 브라우저에서 작동합니다. 지원은 여기에서 볼 수 있습니다 .
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}수직 및 수평 센터링의 경우 다음을 사용할 수 있습니다.
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}공급 업체 접두사 속성을 더 추가 할 수도 있습니다 (예 참조).
답변
또는 원래 CSS를 추가 left: 0하고 추가 right: 0하면 고정되지 않은 일반 요소와 유사하게 작동하며 일반적인 자동 여백 기술이 작동합니다.
.jqbox_innerhtml
{
position: fixed;
width:500px;
height:200px;
background-color:#FFF;
padding:10px;
border:5px solid #CCC;
z-index:200;
margin: 5% auto;
left: 0;
right: 0;
}DOCTYPEIE에서 올바르게 동작 하려면 유효한 (X) HTML 을 사용해야합니다 (물론 그래야합니다 ..!)
답변
다음과 같은 컨테이너를 추가하십시오.
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}그런 다음이 div에 상자를 넣으면 작업이 수행됩니다.
답변
다음을 추가하십시오.
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;답변
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}내부에는 diffenet 너비, 높이 또는없는 요소가있을 수 있습니다. 모두 중심에 있습니다.
답변
이 솔루션에서는 팝업 div의 너비와 높이를 정의하지 않아도됩니다.
그리고 자바 스크립트는 팝업의 크기를 계산하고 절반에서 위쪽으로 빼는 대신 전체 화면을 채우도록 popupContainer의 크기를 조정합니다 …
(100 % 높이, display : table-cell 사용시 작동하지 않음 (수직으로 가운데에 배치해야 함)) …
어쨌든 그것은 작동합니다 🙂
