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

141

안녕하세요, 화면 중간에 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가 화면에 나타나지 않도록 할 때 페이지 상단에 있습니다 (부분의 상단 부분이 화면에 표시됨). 그것을 보려면 아래로 스크롤해야합니다.

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

css  html  window  center 
— 코더 2
소스
방금 테스트 페이지에서 해당 코드를 테스트했으며 div가 페이지를 완전히 <br />밀기 전에 약 100 번이라도 페이지 중앙에 완벽하게 배치 했습니다. DIV의 값을 덮어 쓰거나 DIV가 이러한 문제를 일으키는 데 영향을 미치는 것이 있는지 알아 보려면 나머지 코드를 확인하십시오.
— Eli

답변:

269

그냥 추가 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;
}
— 후세인
소스
1
당신은 생명의 은인입니다. 요소에 변형 스케일이 적용된 경우에도 간단한 솔루션이 잘 작동합니다.
— Vinnie
91

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

<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>
스 니펫 확장

— 사용자 2684935
소스
7
이 접근법은 승인 된 답변보다 훨씬 낫습니다
— Viacheslav Dobromyslov
2
이것을 좋아했지만 "이전"브라우저에서 작동합니까?
— BernaMariano
14

변환을 사용하십시오.

<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");
— 에르도 간
소스
5

그냥 넣어 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>
5

이거 한번 해봐.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
— 찬단 샤르마
소스
1
나는 이것이 더 유용하다고 생각합니다 .'cuz 당신은 부모 요소에 어떤 스타일을 적용 할 필요가 없습니다.
— canbax
3 
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

이것은 나를 위해 일했다

— 아브라함
소스
2
이 기술적으로 정확 수 있지만, 당신은 상황에 대한 문제가 왜이 해결할 수있는 문제에 대한 간략한 설명을 포함 할
— drneel
2

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

— 파스
소스
1 
<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>
— 메이 리 몰브
소스
인터뷰에서 "스크린의 div 중심을 어떻게 정렬합니까?"라는 질문을 받았습니다.
— Maitrey Malve
1

다음은 이에 대한 실제 예입니다.

웹 페이지의 크기를 조정하거나 어떤 크기로든로드하면 가운데 위치를 처리합니다.

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>
스 니펫 확장

위의 샘플 로딩 div 는 항상 중앙에 있습니다.

희망이 당신을 도울 것입니다 :)

— 비카쉬 판 데이
소스
1

화면 중간 또는 상위 태그에 태그를 배치하는 두 가지 방법 :

위치 사용 :

상위 태그 position를 relative(대상 태그에 상위 태그가있는 경우)로 설정 한 후 다음과 같이 대상 태그 스타일을 설정하십시오.

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

플렉스 사용하기 :

부모 태그 스타일은 다음과 같아야합니다.

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}
— 알렉스 졸릭
소스
0

ur 스크립트 페이지에서 ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Div에서 중간 클래스를 사용하십시오 ...

   <div class="a-middle">
— 안토니 잭
소스
-1 

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>
스 니펫 확장

— 룽민
소스
-1

플렉스 사용 

display: flex;
height: 100%;
align-items: center;
justify-content: center;
— ASIR THERANS RAJA M
소스
이것은 화면이 아닌 부모 요소 나 페이지의 중심에 내용을 배치합니다.
— Sean
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.