div가 위로 이동하고 navbar와 겹치다

Question

내 웹 페이지 중 하나에서 일부 드롭 다운이 포함 된 페이지의 가운데에 div가 있습니다 (클래스 이름은 중심에 위치 함). 선택한 값에 따라 일부 확인란이 표시됩니다. 그러나 확인란이 표시 될 때마다 div가 일부 화면에서 위로 이동하고 탐색 표시 줄과 겹치고 있습니다. 누군가이를 고칠 수 있습니까?

css for centered class is 

.centered { 
position:absolute; 
top:50%; 
bottom:50%; 
transform:translate(-50%,-50%); 
transform:-webkit-translate(-50%,-50%); 
transform:-moz-translate(-50%,-50%); 
transform:-ms-translate(-50%,-50%); 
width:400px; 
border:1 px solid black; 
padding:25px; 
margin:50px; 
} 

Answer 1

내 이해를 기반으로합니다. 클래스가 가운데에 놓이는 div는 가운데에 고정되어야합니다. 코드를 보면 top:55%;과 bottom:50%;을 설정합니다. 그것은 이렇게되어야합니다. 시도해보십시오.

.centered { 
position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
transform: translate(-50 % , -50 %); 
transform: -webkit - translate(-50 % , -50 %); 
transform: -moz - translate(-50 % , -50 %); 
transform: -ms - translate(-50 % , -50 %); 
width: 400 px; 
border: 1 px solid black; 
padding: 25 px; 
margin: 50 px; 
}