알 수없는 동적 높이에서 div를 세로로 가운데 맞추는 방법은 무엇입니까?

내 코드에는 얼마나 많은 이미지가 페이지에 추가되는지에 따라 수백 가지 요소가있을 수 있습니다. 이는 페이지의 높이가 0에서 1000 초 사이 또는 그 이상이 될 수 있음을 의미합니다.알 수없는 동적 높이에서 div를 세로로 가운데 맞추는 방법은 무엇입니까?

어떻게하면 페이지 중간에 오버레이 div를 가운데에 배치 할 수 있습니까? 웹 페이지는 다소 Instagram을 모방하려고 시도하지만 수백 개의 이미지를 가질 수 있지만 한 번 클릭하면 오버레이가 페이지 중간에 설정됩니다.

이미지 오버레이의 기본 div입니다. 이 div는 페이지가 페이지의보기 높이가 아니라면 너무 잘 작동합니다. 높이가 너무 커서 아래로 스크롤해야하는 경우 수직의 위치가 엉망이됩니다. 나는 이것이 전체 높이 값을 고려하여 바닥을 15 %로 설정했기 때문에이 문제가 있다는 것을 알고있다. 그러나 나는 그것을 어떻게 고칠 수 있는지 모른다.

.overlayImgContainer{ 
     position: absolute; 
     height: 70%; 
     width: 120%;// (page is set to 960px this add a bit more room) 
     z-index: 1; 
     bottom: 15%; 
     left: -10%; 
     background-color: rgba(0,0,0,0.5); 
     overflow-x: hidden; 
     border-radius: 5px; 
     text-align: center; 
}

출처

2017-11-30 Luke

1) 데모를 추가합니다. 2) 검색 - 귀하의 질문에 여러 번 대답했습니다. – plvice

이미 수백 가지 답변이 있어야합니다. 기본적으로 당신은 모달 윈도우처럼 들립니다. –

여기에서 질문하는 질문은 높이를 알고 있지만 세로로 중심을 맞추는 것과 관련이 있습니다. 나는 그 페이지의 높이를 모른다. – Luke

-1

플렉스 박스를 사용할 수 있습니다.

CSS

.wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

HTML

<div class="wrapper"> 
    <div>...</div> 
</div>

출처

2017-11-30 09:44:26

알 수없는 동적 높이에서 div를 세로로 가운데 맞추는 방법은 무엇입니까?

답변

관련 문제