찾다

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

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

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

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

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

  4. /*/

    .wrap{

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

    3. <

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

    3. p

      4. class
    4. =

      "wrap"

      5. > ;

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

      9. <p

        10. class
      10. =

        "wrap"

        11. >

       

      <

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

      2. p> p > 🎜>

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

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

      2. }.

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

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

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


        <

      1. p class

        =
        2. "랩"

      2. > ="센터">< /

        3. p

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

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

      노란색
      5. ;
    5. 너비

      :

      200px
      6. ;
    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의 새로운 기능에 대한 자세한 분석

관련 기사

더보기