원점을 요소의 가운데로 이동 하시겠습니까?

배경 : 내 프로젝트에서 작은 사각형 div (. 노드)를 "지도"에 분산시킵니다.원점을 요소의 가운데로 이동 하시겠습니까?

.node{ 
    position: absolute; 
    width: A; 
    height: A; 
    left: X %; 
    top: Y %; 
    margin-left: -(A/2); 
    margin-top: -(A/2); 
}

"노드"를 이동하려면 여백을 사용해야한다는 것을 알 수 있습니다. 따라서 좌표가 가운데에 오게됩니다.

질문 :CSS의 중심을 원점으로 이동하여 여백을 사용할 필요가없는 방법이 있습니까? "변형 원점"은 순환 게재에만 사용됩니다. transform-origin 기본적 (0, 0)입니다 때문에

출처

2014-02-25 Magnus

'너비 : 0; 높이 : 0; overflow : visible'? –

Ulrich에 대해 알아 보겠습니다. 팁 주셔서 감사합니다. – Magnus

왜 마진을 사용하지 않는 것이 좋을까요? – Nit

당신은 부정적인 translateX/Y

.node{ 
    position: absolute; 
    width: ...; 
    height: ...; 
    left: 50%; 
    top: 50%; 

    -webkit-transform: translate3d(-50%, -50%, 0); 
    -moz-transform: translate3d(-50%, -50%, 0); 
    transform: translate3d(-50%, -50%, 0); 
}

를 사용할 수 있습니다,이 번역은 (x 및 y 축을 따라) 크기의 -50%하여 요소를 이동합니다.

코데 핀 (Codepen)의 예 : http://codepen.io/anon/pen/Hkglh

출처

2014-02-25 10:30:32 fcalderan

원점을 요소의 가운데로 이동 하시겠습니까?

답변

관련 문제