페이지가 화면보다 큰 경우 화면 중간에 div를 배치하는 방법 width:30em;

안녕하세요, 화면 중간에 div를 가져 오기 위해 다음과 비슷한 것을 사용하고 있습니다.

<style type="text/css">
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

그러나 이것의 문제는 항목을 화면이 아닌 페이지 중앙에 배치한다는 것입니다. 따라서 페이지가 몇 화면 높이이고 div가 화면에 나타나지 않도록 할 때 페이지 상단에 있습니다 (부분의 상단 부분이 화면에 표시됨). 그것을 보려면 아래로 스크롤해야합니다.

화면 중앙에 어떻게 표시되는지 알려주시겠습니까?

답변

그냥 추가 position:fixed하면 아래로 스크롤해도 볼 수 있습니다. http://jsfiddle.net/XEUbc/1/ 에서 참조하십시오

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

답변

나는 이것이 간단한 해결책이라고 생각한다.

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>
스 니펫 확장

답변

변환을 사용하십시오.

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

자바 스크립트 솔루션 :

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

답변

그냥 넣어 margin:auto; 

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
<div id="mydiv">Test Div</div>

답변

이거 한번 해봐.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

답변

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

이것은 나를 위해 일했다

답변

짧은 대답, 그냥 추가 position:fixed하면 문제가 해결됩니다.