CSS를 사용하여 컨테이너를 가로 및 세로 중앙에 배치하는 7가지 방법

이 글에서는 CSS를 사용하여 컨테이너를 가로, 세로로 중앙에 배치하는 7가지 방법을 주로 소개합니다. 관심 있는 친구들은 참고하세요.

이런 종류의 CSS 레이아웃이 일반적으로 사용됩니다. 꽤 많고, 면접에서도 자주 나오는 질문이기도 한데, 인터넷에서 검색해보시면 많이 나오실 텐데, 그래도 제가 직접 요약해 드리고 싶습니다.
이런 방법은 여러 가지가 있습니다. 이 글에서는 인상을 깊게 하기 위해 그 중 몇 가지만 요약했습니다.
렌더링은 모두 다음과 같습니다.

방법 1: 위치 + 여백

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

1. <p class ="포장">

2. <p class="센터">p>

3. p>

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

1. / **CSS**/ .wrap { 너비: 200px; 높이: 200px배경 : 노란색; 위치: 상대

2. } .wrap .

   center { 너비: 100px; 높이: 배경: 녹색 ; 🎜>여백: 자동; 위치: 왼쪽: 오른쪽오른쪽: 0; 상단: 0; 하단: 0; 🎜>지원 모든 주요 브라우저, IE6에서는 지원되지 않음방법 2: diaplay:table-cell

<p

class
1. =

   "wrap">

2. <p class= "center">

p> p > >

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

4. /*/

   .wrap{

   너비
: 200px


높이

:

200px; 배경: 노란색

;
테이블 셀
1. 세로 정렬

   : 가운데; 텍스트 정렬: 가운데;

2. } .center{ display: inline-blockvertical-align: 중; 너비: 100px; 높이: 100px; : green;

}
display:table-cell을 사용하는 이유는 IE67이 호환되지 않기 때문입니다.

4. 방법 3:
위치 더하기 변환

XML/HTML 코드

클립보드에 콘텐츠 복사


1. <

   p
2. class

   ="wrap"> <

   p
3. class

   ="center"> >피> >피>

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

5. /* css */

   .wrap {

   위치
:
상대

;
배경

:

노란색: 200px ; 높이

:
200px
1. ;} .

   중앙 { 위치: 절대배경 : 녹색; 위:50%; -webkit-transform:translate(-50%,-50%); (-50%,-50%); 너비: 100px; 높이: 100px 호환성: IE9 이하는 변환을 지원하지 않지만 모바일 버전이 더 나은 성능을 발휘합니다. 방법 4: flex;align-items: center;justify-content: centerXML/HTML 코드클립보드에 콘텐츠 복사

3. <

p

class

=

"wrap">


 

<

p class=

"center"
1. >
   피
2. >

   피> 클립보드에 콘텐츠 복사

   1. /* css */ .wrap { 배경: 노란색 너비: 200px; 높이: 디스플레이: align-items: 가운데 -콘텐츠: 가운데; } . >;

      높이
   :
   2. 100px

      ; } 모바일 버전 선호

      방법 5:
   dis

   3. play :flex;margin:auto

   XML/HTML 코드

   클립보드에 콘텐츠 복사

<

3. p

class
4. =

   "wrap"

> ;

<p

class
=

"center"

>

p
1. >

2. p>
3. CSS 코드

   클립보드에 콘텐츠 복사

   1. /* css */ .wrap { 배경: 노란색; 너비: 200px; 높이: 200px; 위치: 상대;   

   2. } /**방법 1**/ .중앙 { 배경: 녹색; 위치: 절대; 너비: 100px; 높이: 100px; 왼쪽: 50px; 상단: 50px;    

   3.      

   4. } /**방법 2**/ .센터 { 배경: 녹색; 위치: 절대; 너비: 100px; 높이: 100px; 왼쪽: 50%; 상위: 50%; 여백-왼쪽:-50px; 여백 상단:-50px;   

   5. }   

   6.   

   兼容性：适用于所有浏览器

   방법 중형 방법 一计算公式如下：
   子元素(conter)의 left值计算公式：left=(父元素的宽 - 子元素的宽) / 2=(200-100) / 2=50px ;
   자원素(conter)의 top值计算公式：top=(父元素的高 - 자원素적높은 ) / 2=(200-100) / 2=50px;
   방법이용두공공式：
   왼쪽 值固定为50%;
   子元素的margin-left= -(子元素的宽/2)=-100/2= -50px;
   top值也一样，固定为50%
   자원素적 여백= -(자원세적 높이/2)=-100/2= -50px;

   방법법:兼容低版本浏览器 ，不固定宽高

   
   

   XML/HTML 코드复system内容到剪贴板

   1.   

   2. <p 수업="테이블">  

   3.     <p 클래스="tableCell">  

   4.         <p  클래스="콘텐츠">不固定宽高，自适应p>  

   5.     p>  

   6. p>  

   7.   

   
   

   CSS 코드复제内容到剪贴板

   1. /* css*/ .table { 높이: 200px;/*高島值不能少*/ 너비:  200px;/*宽島值不能少*/ 디스플레이: 테이블; 위치: 상대; 플로트:왼쪽; 배경: 노란색;   

   2. } .tableCell { display: table-cell vertical-align: middle; 🎜>텍스트 정렬: 가운데; :

      10px
   ;

   3. *상단: 50%; 🎜>왼쪽: 50%;

      } .
   내용
   4. { 🎜>:

      왼쪽: -50%; 배경

      :
   green
   5. 🎜>
      위의 7가지 방법을 임시로 요약해 보겠습니다. 사실, 그 중 한두 가지에 익숙해지면 충분할 것입니다.

   6. 요약

      모바일 기기라면 4번과 5번 방법을 사용하는 것이 더 편리합니다. 또한 고정되지 않은 너비와 높이를 지원하며 빠르고 정확하며 무자비합니다.
   즉, flex-items: center를 사용합니다.

   7. XML/HTML 코드

   클립보드에 콘텐츠 복사

   9. <p

   class
   10. =

       "wrap"

   >

    

   <

   p class

   =

   "center"
   

   >

   
   

   피>피

   >

   클립보드에 콘텐츠 복사

   2. /* css */ .wrap { 배경: 노란색; 너비

      :
   높이
   3. :

      200px: flex; 항목: 센터; 정렬-콘텐츠: 센터} .중앙 { 배경: 녹색; 너비

      :
   100px
   4. :

      100px ; }

   또는 display:flex;margin:auto;

   
   

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

   1. <p class="랩"> ="센터">

   < /

   2. p> p > 🎜>

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

   1. /* css */ .wrap { 배경: 노란색; 너비: 200px; 높이: 200px표시 : 플렉스;

   2. }.

      중앙 { >: 100px: 100px; 여백: 자동 }

   3. PC라면 호환성을 고려해야 합니다. 여섯번째 방법이 좋다, 즉 순수입이다.

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

   
   

   <

   1. p class

      =
   "랩"

   2. > ="센터">< /

   p

   3. > p > 🎜>CSS 코드클립보드에 콘텐츠 복사

4. / * CSS */ .wrap { 배경:

   노란색
;
5. 너비

   :

   200px
;
200px

;
위치

:

상대; >중심 { 배경:

녹색
;
1. :

   절대; 너비: 100px ; 높이: 100px; >: 50px; 상단: 50px; 

    

2. } /**방법 1**/.중앙 { 배경: 녹색 위치: 절대; 너비: 높이: 왼쪽: 상단: 50%; 왼쪽 여백:- 50px 여백-상단:-50px;

3. PC측 중간 요소의 높이가 고정되어 있지 않은 경우에는 7번 방법을 사용하면 코드가 복사되지 않습니다.
   세로 CSS 요소를 실제로 요약하려면 유형이 10개, 20개 이상이어야 합니다. 그러나 일반적인 이해가 있고 사용 시 부작용이 없다면 모두 마스터할 필요는 없습니다.

위 내용은 CSS를 사용하여 컨테이너를 가로 및 세로 중앙에 배치하는 7가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!