HTML 요소를 수평 및 수직 중앙에 배치-HTML 튜토리얼-php.cn

HTML 요소를 수평 및 수직 중앙에 배치

高洛峰

풀어 주다： 2017-02-27 10:43:42

원래의

1047명이 탐색했습니다.

페이지를 디자인할 때 p를 중앙에 배치하고 로그인 창을 중앙에 배치하는 등 페이지 창을 기준으로 가로 및 세로로 표시해야 하는 경우가 많습니다.

지금까지 많은 방법이 모색되었습니다.

HTML:

<body>
    <p class="maxbox">
        <p class="minbox align-center"></p>
    </p>
</body>

로그인 후 복사

렌더링(다음 방법의 렌더링은 동일함):

HTML 요소를 수평 및 수직 중앙에 배치

첫 번째 유형: CSS 절대 위치 지정

은 주로 절대 위치 지정을 사용하며, 그 후 여백을 사용하여 중간 위치로 조정합니다.

상위 요소:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

하위 요소:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

가로 세로 가운데 정렬:

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    margin-left: -100px;   /*width/-2*/
    margin-top: -100px;    /*height/-2*/
}

로그인 후 복사

두 번째 유형: CSS 절대 위치 지정 + Javascript/JQuery

절대 위치 지정을 주로 사용하고, Javascript/JQuery를 사용하여 중간 위치로 조정합니다. 첫 번째 방법에 비해 이 방법은 클래스의 유연성을 향상시킵니다.

상위 요소:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

하위 요소:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

가로 세로 가운데 정렬:

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
}

로그인 후 복사

JQuery:

$(function(){   
    $(".align-center").css(   
        {   
            "margin-left": ($(".align-center").width()/-2),   
            "margin-top": ($(".align-center").height()/-2)   
        }   
    );   
});

로그인 후 복사

세 번째 방법: CSS3 절대 위치 지정 + 변위

절대 위치 지정과 CSS3 변환: 번역을 사용하면 동일한 효과를 얻을 수도 있습니다.

상위 요소:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

하위 요소:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

가로 및 세로 가운데 정렬:

.align-center{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    -webkit-transform: translate(-50%, -50%);   
       -moz-transform: translate(-50%, -50%);   
            transform: translate(-50%, -50%);        /*向左向上位移*/
}

로그인 후 복사

네번째 type : Flexbox: [텔레스코픽 레이아웃 상자 모델]

Flexbox 모델에서는 가로, 세로로 요소를 만드는 것이 너무 쉽습니다.

여기에서 HTML을 변경해야 합니다:

<p class="maxbox align-center">
    <p class="minbox"></p>
</p>

로그인 후 복사

상위 요소:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

하위 요소:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

수평 및 수직 중앙 정렬:

.align-center{   
    display: flex;   
    display: -webkit-flex;       /*兼容问题*/
    justify-content: center;   
    align-items: center;    
}

로그인 후 복사

여러 방법 비교:

최초의 CSS 절대 위치 여백 조정, 호환성 좋음 하지만 유연성이 부족합니다. 가로, 세로 가운데 정렬해야 하는 상자가 많은 경우 너비와 높이가 다르기 때문에 .align-center 를 다르게 작성해야 합니다.
두 번째는 스크립팅 언어를 사용하는데, 이는 호환성이 좋고 첫 번째의 단점을 보완합니다. 수평 및 수직 센터링 효과는 너비와 높이의 변화에 영향을 받지 않습니다.
세 번째는 CSS3의 몇 가지 새로운 속성을 사용하며 IE10, Chrome, Firefox 및 Opera와 호환됩니다. 호환성이 그다지 좋지 않으며 가로 및 세로 센터링 효과가 너비와 높이의 변화에 영향을 받지 않습니다.
Firefox, Opera 및 Chrome과 호환되는 Flexbox 모델을 사용하면 IE가 완전히 제거됩니다. 또한 너비와 높이의 변화로 인한 수평 및 수직 센터링 효과에도 영향을 미치지 않습니다.

위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

요소의 수평 및 수직 중앙 정렬에 대한 더 많은 HTML 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!