찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 컨테이너를 가로 및 세로 중앙에 배치하는 7가지 방법

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

巴扎黑
巴扎黑원래의
2017-05-21 10:31:152672검색

이 글에서는 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

XML/HTML 코드

클립보드에 콘텐츠 복사


p

    class
  1. =

    "wrap">

  2. p class= "center">

  3. p> p >

    >

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

  5. /*/

    .wrap{

    너비
    6. :
200px


높이

:

200px; 배경: 노란색

;
    테이블 셀
  1. 세로 정렬

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

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

    3. }

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

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

XML/HTML 코드

클립보드에 콘텐츠 복사

  1. p
  2. class

    ="wrap">

    p
  3. class

    ="center"> >피> >피>

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

  5. /* css */

    .wrap {

    위치
    6. :
상대

;
배경

:

노란색: 200px ; 높이

:
    200px
  1. ;} .

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

    4. p

class

=

"wrap">


 

p class="center"
  1. >

    피
  2. >

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

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

      높이
      2. :
    2. 100px

      ; } 모바일 버전 선호

      방법 5:
      3. dis

    3. play :flex;margin:auto

    XML/HTML 코드

    클립보드에 콘텐츠 복사

    3. p

    class
  3. =

    "wrap"

    4. > ;

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. ;

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

      } .
      4. 내용
    4. { 🎜>:

      왼쪽: -50%; 배경

      :
      5. green
    5. 🎜>

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

    6. 요약

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

    7. XML/HTML 코드

      8. 클립보드에 콘텐츠 복사

    p

    4. class
  4. =

    "wrap"

    5. >

 

p class

=

"center"

>


피>피

>

    2. 클립보드에 콘텐츠 복사

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

    :
    3. 높이
  3. :

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

    :
    4. 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 코드
    클립보드에 콘텐츠 복사


      p class

      ="랩"

    1. > ="센터">

      2. p

    2. > p > 🎜>CSS 코드

      클립보드에 콘텐츠 복사

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

      노란색
      4. ;
    4. 너비

      :

      200px
      5. ;
    200px

    ;
    위치

    :

    상대; >중심 { 배경:

    녹색
      ;
    1. :

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

       

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

    3. PC측 중간 요소의 높이가 고정되어 있지 않은 경우에는 7번 방법을 사용하면 코드가 복사되지 않습니다.

      세로 CSS 요소를 실제로 요약하려면 유형이 10개, 20개 이상이어야 합니다. 그러나 일반적인 이해가 있고 사용 시 부작용이 없다면 모두 마스터할 필요는 없습니다.

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

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3의 새로운 기능에 대한 자세한 분석다음 기사：CSS3의 새로운 기능에 대한 자세한 분석

관련 기사

더보기