CSS3에서 상자를 가로 중앙에 배치하는 방법

CSS3에서 상자를 수평으로 중앙에 배치하는 방법: 1. 여백 속성을 사용하고 상자 요소에 "margin: 0 auto;" 스타일을 추가하여 수평으로 중앙에 배치합니다. 2. 수평 중앙에 배치하기 위해 Flex Elastic 레이아웃을 사용합니다. 위치 및 변환 사용 속성은 가로 중앙에 배치됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서 상자를 수평으로 중앙에 배치하는 방법은 매우 일반적인 인터뷰 질문입니다. 상자의 중앙 배치는 상위 요소를 기준으로 하기 때문에 상자를 중앙에 배치할 때 상위 상자가 하위 상자를 중첩하도록 중첩을 사용하는 경우가 많습니다. .

부모 상자와 자식 상자가 중첩되어 있을 때 자식 상자를 중앙에 배치하는 방법:

• 첫 번째 방법: 여백: 0 자동, 테두리 사용, 여백 사용은 다른 상자 사용에 영향을 미치므로 그렇지 않습니다. 권장됩니다.

• 두 번째 방법: 위치, 위치 지정 사용, 자식은 부모와 동일해야 하며 왼쪽: 50%, 여백-왼쪽: 음수 상자 너비의 절반, 가장 일반적으로 사용되는 방법입니다.

• 세 번째 방법: Flex, 유연한 레이아웃, 하위 상자를 중앙에 배치하지만 스타일은 상위 상자에 작성해야 합니다. display:flex, just-content:center;

네 번째 방법: 위치 기반, margin-left를 CSS3의 변환으로 변경합니다:translate(-50px);
다섯 번째 방법: 위치를 기준으로 자식과 부모만 유지한 다음 margin:auto, left:0, right를 추가합니다. 하위 상자 :0;

• 보충: 다섯 번째 방법에서 상단:0, 하단:0을 추가하면 수직 및 수평 센터링을 얻을 수 있습니다

  <div id="father">
      <div id="son"></div>
  </div>

  <style>
      #father{
          width: 400px;
          height: 200px;
          border: 3px solid pink;
      }
      #son{
          width: 100px;
          height: 100px;
          border: 2px solid red;
      }
  </style>

여백을 사용하여 수평 센터링을 달성합니다.

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 30px auto; /* 让父元素相对于body居中 */
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 0 auto;/* 让子元素相对于father居中 */
}
</style>

위치 지정 사용 , 자식은 부모와 동일해야 하며 왼쪽: 50%, 여백-왼쪽: 음수 상자 너비의 절반:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
</style>

플렉스, 유연한 레이아웃, 자식 상자를 중앙에 배치하지만 스타일은

부모 상자

:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}
</style>

위치를 기준으로 자식과 부모만 유지한 다음 자식 상자에 margin: auto, left: 0, right: 0을 추가합니다:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}
</style>

위의 방법을 사용하면 가로 가운데 맞춤을 달성할 수 있습니다. 다른 우수한(이상하고) 화려한(파이) 방법이 있는 경우 교환을 환영합니다!

다섯 번째 방법이 추가되었습니다. top:0, Bottom:0을 추가하면 가로 및 세로 중심 맞춤이 가능합니다.

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
</style>

(동영상 공유 학습:

css 동영상 튜토리얼

)

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