CSS를 사용하여 Div를 중앙에서 확장하는 방법은 무엇입니까?

CSS를 사용하여 중앙에서 Div 확장

CSS를 사용하여 div를 확장할 때 일반적으로 중앙은 그대로 두고 왼쪽 상단에서 확장됩니다. 그러나 확장이 div 중앙에서 시작되기를 원하는 시나리오가 있을 수 있습니다. 창의적인 CSS 기술을 사용하면 아래 설명된 대로 이 효과를 얻을 수 있습니다.

핵심: 수식을 통해 여백 조정

가운데에서 div를 확장하려면 여백을 전환하는 것이 핵심입니다. 여백을 조정하는 공식이 사용되어 중심점을 중심으로 대칭적으로 확장이 발생합니다.

옵션 1: 예약된 공간 내에서 확장

이 옵션은 주변의 예약된 공간 내에서 div를 확장합니다. :

<code class="css">#square {
    margin: 100px;
    transition: width 1s, height 1s, margin 1s;
    ...
}
#square:hover {
    margin: 55px;
}</code>

옵션 2: 주변 요소 위로 확장

여기서 div는 주변 요소 위로 확장됩니다.

<code class="css">#square {
    margin: 0; /*for centering purposes*/
    transition: width 1s, height 1s, margin 1s;
    ...
}
#square:hover {
    margin: -50px; /* 0 - (110px - 10px [= 100px]) / 2 =  -50px */
}</code>

옵션 3: 요소 확장 및 이동 문서 흐름

이 옵션은 흐름에서 이전 요소 위로 div를 확장하고 그 뒤의 요소를 이동합니다.

<code class="css">#square {
    position: relative;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    ...
}
#square:hover {
    top: -50px;
    left: -50px;
    margin-right: -50px;
    margin-bottom: -50px;
}</code>

비정사각형 요소에 대한 참고

제공된 솔루션은 정사각형 요소에 가장 적합합니다. 정사각형이 아닌 요소의 경우 전환은 각 방향에 대해 다르게 조정되어야 합니다. 예를 들어 너비를 높이의 두 배로 조정할 수 있습니다.

<code class="css">#rectangle {
    transition: width 1s, height 1s, margin 1s;
    ...
}
#rectangle:hover {
    margin: -50px -100px; /* margin: -50px -((initial margin - width change (or height change))/2) */
}</code>

이러한 기술을 따르면 JavaScript를 사용하지 않고도 div를 중앙에서 확장하는 원하는 효과를 얻을 수 있습니다.

위 내용은 CSS를 사용하여 Div를 중앙에서 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!