HTML_HTML/Xhtml_Webpage Production 요소의 수평 및 수직 중앙 정렬에 대한 토론

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

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

HTML:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <몸>
2.  <div class="maxbox" >
3.  <div class="minbox align -center">div>
4.  div> 
5. 몸>

렌더링(다음 방법은 동일한 렌더링을 가짐):

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

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

상위 요소:

CSS 코드클립보드에 콘텐츠 복사

1. .maxbox{
2. 직위: 친척
3. 너비: 500px;
4. 높이: 500px;
여백
5. : 5px; 상자 그림자: 1px
6. 1px 1px rgba (0, 0, 0, 0.8), -1픽셀 -1픽셀 1픽셀 rgba(0, 0, 0, 0.8) }
8. 하위 요소:

CSS 코드

클립보드에 콘텐츠 복사

.minbox{

1. 너비
:
2. 200px; 높이:
200px
3. ; 상자 그림자: 1px 1px
4. 1px rgba (0, 0, 0, 0.8), -1픽셀 -1픽셀 1픽셀 rgba(0, 0, 0, 0.8) }

   수평 및 수직 중앙 정렬:

   CSS 코드클립보드에 콘텐츠 복사

   1. .align-center{
   2. 위치: 절대
   3. 왼쪽: 50%
   4. 상위: 50%
   5.  왼쪽 여백: -100px;  /*너비/-2* /
   6.  여백-상단: -100px;  /*height/-2* /
   7. }

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

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

   상위 요소:

   CSS 코드클립보드에 콘텐츠 복사

   1. .maxbox{
   2. 직위: 친척
   3. 너비: 500px;
   4. 높이: 500px;
   여백
   5. : 5px; 상자 그림자: 1px
   6. 1px 1px rgba (0, 0, 0, 0.8), -1픽셀 -1픽셀 1픽셀 rgba(0, 0, 0, 0.8) }
   8. 하위 요소:

   CSS 코드

   클립보드에 콘텐츠 복사

   .minbox{

   1. 너비
   :
   2. 200px; 높이:
   200px
   3. ; 상자 그림자: 1px 1px
   4. 1px rgba (0, 0, 0, 0.8), -1픽셀 -1픽셀 1픽셀 rgba(0, 0, 0, 0.8) } 수평 및 수직 중앙 정렬:
   5. CSS 코드
   클립보드에 콘텐츠 복사

   1. .align-center{
   2. 위치: 절대
   3. 왼쪽: 50%
   4. 상위: 50%
   5. }

   제이쿼리:

   JavaScript 코드클립보드에 콘텐츠 복사

   1. $(함수(){
   2. $(".align-center").css(
   3.                                          
    
   4. "왼쪽 여백": ($(".align-center").width() /-2),
    
   5. "여백-상단": ($(".align-center").height() /-2)
                                                          
   6. )
   7. })

   세 번째 유형: CSS3 절대 위치 변위

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

   CSS 코드

   클립보드에 콘텐츠 복사

   .maxbox{

   직위
   2. : 친척
   너비
   3. : 500px; 높이
   :
   4. 500px; 여백:
   5px
   5. ; 상자 그림자: 1px 1px
   6. 1px rgba (0, 0, 0, 0.8), -1픽셀 -1픽셀 1픽셀 rgba(0, 0, 0, 0.8) }
   7. 하위 요소:
   8. CSS 코드
   클립보드에 콘텐츠 복사

   1. .minbox{
   2. 너비: 200px;
   3. 높이: 200px; 상자 그림자:
   1px
   4. 1px 1px rgba (0, 0, 0, 0.8), -1픽셀 -1픽셀 1픽셀 rgba(0, 0, 0, 0.8) }
   수평 및 수직 중앙 정렬:

   CSS 코드

   클립보드에 콘텐츠 복사

   .align-

   1. center{
   위치
   2. : 절대
   상위
   3. : 50%
   왼쪽
   4. : 50% -webkit-transform: 번역(-50%, -50%)
   5. -moz-transform: 번역(-50%, -50%)
   6. 변환: 번역(-50%, -50%)
   /*왼쪽 및 위로 이동*/
   7. }

   네 번째 유형: Flexbox: [망원경 레이아웃 상자 모델]

   Flexbox 모델을 사용하면 요소를 수평 및 수직으로 만드는 것이 너무 쉽습니다. 여기에서 HTML을 변경해야 합니다:

   XML/HTML 코드

   클립보드에 콘텐츠 복사

   <

   1. div class="maxbox align-center" >  <
   2. div class="minbox" >div> div>
   상위 요소:

   CSS 코드

   클립보드에 콘텐츠 복사

   1. .maxbox{
   2. 직위: 친척
   3. 너비: 500px;
   4. 높이: 500px;
   여백
   5. : 5px; 상자 그림자: 1px
   6. 1px 1px rgba (0, 0, 0, 0.8), -1픽셀 -1픽셀 1픽셀 rgba(0, 0, 0, 0.8) }
   8. 하위 요소:

   C# 코드

   클립보드에 콘텐츠 복사

   .minbox{

   1. 너비: 200px
   높이: 200px
   상자 그림자: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8)
   }
   5. 수평 및 수직 중앙 정렬:

   CSS 코드

   클립보드에 콘텐츠 복사

   .align-

   center

   1. { 디스플레이
   : 플렉스
   2. 디스플레이
   : -webkit-flex;
   3.  정의-콘텐츠:
   센터
   4. ; > 항목 정렬: 중앙; }
   5. 여러 가지 방법 비교: 첫 번째 CSS 절대 위치 여백 조정은 호환성은 좋지만 유연성이 부족합니다. 가로, 세로 가운데 정렬해야 할 상자가 많은 경우 너비와 높이가 다르기 때문에 .align-center 를 다르게 작성해야 합니다. 두 번째는 스크립팅 언어를 사용하는데, 이는 호환성이 좋고 첫 번째의 단점을 보완합니다. 수평 및 수직 센터링 효과는 너비와 높이의 변화에 ​​영향을 받지 않습니다. 세 번째는 CSS3의 몇 가지 새로운 속성을 사용하며 IE10, Chrome, Firefox 및 Opera와 호환됩니다. 호환성이 그다지 좋지 않으며, 가로 및 세로 센터링 효과가 너비와 높이의 변화에 ​​영향을 받지 않습니다. Firefox, Opera 및 Chrome과 호환되는 Flexbox 모델을 사용하면 IE가 완전히 제거됩니다. 또한 너비와 높이의 변화로 인한 수평 및 수직 센터링 효과에도 영향을 미치지 않습니다.
   위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.