jQuery의 div 페이지 중간에 gif를 표시하는 방법은 무엇입니까?

Question

div가 있는데 페이지 역할을하며 gif 만 있습니다. gif는 페이지의 왼쪽 상단에 나타납니다. 페이지의 중앙에 나타나게하고 싶습니다. 아래에서 내가 시도한 HTML과 CSS를 찾을 수는 있지만 제대로 작동하지 않는 것 같습니다.

<div id="correctGIF" data-role="page" data-add-back-btn="false"> 
    <img src="images/correct.gif"> 
</div> 

.correctGIF > img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

Answer 1

당신의 사업부가의 크기라고 가정 : 또는

#correctGIF > img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

, 당신은 테이블로 표시 한 다음 중앙에 div에하는 스타일을 적용 할 수 있습니다로 당신은 ID 선택기에 그것을 변경할 수 있습니다 페이지 및이 position:relative는

#correctGIF > img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    display:block; 
} 

당신에게 방법의 가장을 얻을 것이다.

그러나 이미지의 상단/왼쪽 모서리는 50 % 위치에 놓여 있으므로 정확히이 아닙니다.

이미지의 크기를 알고 있다면 당신은 200x200 크기의 이미지에 대한 예를

margin-top: -100px; 
margin-left: -100px; 

을 위해, 그래서 너무

margin-top: - [Insert 50% of image height] px; 
margin-left: - [Insert 50% of image width] px; 

같은 부정적인 여백을 조정할 수 있습니다.

이미지의 크기를 모르는 경우 (자주 변경하는 경우) 음수 여백을 없애고 사용하면됩니다.

transform: translate(-50%, -50%); 

이미지의 최종 위치는 이미지의 크기와 관계없이 OWN 치수에 따라 조정됩니다.

Answer 2

당신은 CSS에서 클래스를 선택하는 대신 ID 선택기를 사용하는

#correctGIF > img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

Answer 3

잘못된 CSS를 선택.

<div style="display:table-cell; vertical-align:middle; text-align:center" data-role="page" data-add-back-btn="false"> 
<img src="images/correct.gif"> 
</div>