가변 너비와 높이로 div의 수직 및 수평 중앙 정렬을 달성하기 위한 CSS3의 변환 속성에 대한 자세한 소개

transform의 역할

transform 속성2D 또는 3D 변환을 적용 요소. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. (w3c학교)

변신 호환성

변신 호환성은 비교적 낙관적입니다. IE9 이하에서는 호환되지 않습니다. IE9는 대체 -ms-transform 속성을 지원하지만 2D 변환만 지원합니다.

Google과 Safari는 대체 -webkit-transform 속성을 지원합니다. IE9 이상, Firefox, Open이 호환됩니다.

실제 프로젝트에서 p의 가변 너비와 높이, 수직 및 수평 센터링 문제에 분명히 직면하게 될 것이라고 믿습니다. js를 사용하여 구현했던 기억이 납니다.

사실 CSS로 구현하는 방법은 여러 가지가 있습니다. 하지만 개인적으로 변환을 사용하는 것이 더 간단하고 편리하다고 생각하지만, IE9 이하의 브라우저에서는 호환되지 않습니다.

이제 최근 프로젝트에 사용된 예제를 보여드리겠습니다

Writing Wheel When 사진 재생시 아래 버튼의 도트 개수는 사진 개수에 따라 결정됩니다. 따라서 코드 작성 시 이러한 버튼 요소의 너비는 고정될 수 없으며 반드시 중앙에 표시되어야 합니다.

       <p class="scroll">
            <p class="scroll_pic">
                <a href="#"><img src="img/pic1.jpg" alt=""/></a>
                <a href="#"><img src="img/pic2.jpg" alt=""/></a>
                <a href="#"><img src="img/pic3.jpg" alt=""/></a>
                <a href="#"><img src="img/pic.jpg" alt=""/></a>
            </p>
            <ul>
                <li class="scroll_in"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </p>

.scroll {
    width: 720px;
    height: 410px;
    margin: 0 auto;
    margin-top: 100px;
    overflow: hidden;
    position: relative;
}.scroll ul {
    padding: 10px 0px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    bottom: 0px;
    left: 50%;
}.scroll ul li {
    float: left;
    margin: 0px 5px;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    border:1px #73B613 solid;
    background: #FCBE47;
    box-sizing: border-box;    
}.scroll ul li.scroll_in{
    background:#FF6600;
}

위의 예에서 이러한 버튼은 ul 요소에서 호스팅됩니다. A 위치는 왼쪽에서 50%입니다. 왼쪽은 50이라고 쓰여 있는데, 변환을 쓰지 않으면 중앙에 위치하지 않고 오른쪽의 너비에는 자체 ul의 너비가 포함됩니다.

transform:translateX(-50%); 이 문장의 기능은 ul을 자체 위치를 기준으로 너비의 50%만큼 왼쪽으로 수평으로 이동하는 것입니다. 이것은 우리가 원하는 효과를 달성합니다.

실제 프로젝트에서도 p를 사용하여 팝업 효과를 시뮬레이션하는 등 모달박스를 많이 사용합니다.

위 사진은 가로 세로 중심입니다 .

<p class="demo">　　 <img src="img/pic3.jpg" /></p>

rrree

사실 위 예시는 팝업창을 중앙에 작성하는 경우와 동일합니다. 이것만 있으면 너무 많은 js를 작성하고 도움을 요청할 필요가 없습니다.

위 내용은 가변 너비와 높이로 div의 수직 및 수평 중앙 정렬을 달성하기 위한 CSS3의 변환 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!