두 개의 안테나 중심을 CSS로 정렬하는 방법은 무엇입니까?

Question

은이 같은 래퍼 내에 배치되고 그 안에 원형 이미지 캔버스 가지고

<div id="kaleidowrapper"><canvas class="kaleidoscope" height="1448" width="1448"></canvas></div> 

.kaleidoscope는 원형 화상이다. 원형 이미지 반경은 이미지가 전체 배경을 포함 할 수 있도록 브라우저 크기를 기반으로 설정됩니다. 내 이미지 GET의 기본적

#kaleidowrapper{ 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

같은 위치 : 높이와 폭이 래퍼는 다음과 같은 CSS를 가지고이

처럼 2*radius 있습니다

을 어떻게에게 위치를 수 화면 중앙에 이미지가 표시됩니까? 이런 식으로 뭔가가 페이지의 중앙에 이미지의 왼쪽 위 모서리를두고있다

Answer 1

jquery를 사용해야합니다. 이 fiddle

JS 시도 :

var imgWidth = Math.sqrt(($("div").width()*$("div").width())*2); 
$("img").css({ 
    "width": imgWidth, 
    "position":"relative", 
    "left":-((imgWidth-$("div").width())/2), 
    "top":-((imgWidth-$("div").height())/2), 
    }); 

Answer 2

: 이미지 정확히 중심을 얻기 위해

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
} 

, 당신은 절반 이미지의 부정적인 위쪽 여백을 appy 수 필요 높이, 이미지 너비의 절반의 음수 왼쪽 여백.

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -???px; 
    margin-left: -???px; 
}