CSS 속성을 사용하여 다양한 중심 채우기 방법을 구현하는 방법에 대한 자세한 코드 설명

첫 번째는 가로로 가운데 맞추는 것입니다. 가장 쉬운 방법은 물론

margin:0 auto;

즉, margin-left 및 margin-right 속성을 자동으로 설정하여 가로 가운데 맞춤 효과를 얻는 것입니다.

다른 방법은 어떤가요?

line-height

먼저 텍스트의 가로 중심 정렬 방법을 소개합니다:

<p class="wrap">刘放</p>

line-height를 높이와 동일하게 사용:

.wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;
   height: 200px;
  font-size: 36px;
  background-color: #ccc;
}

효과는 다음과 같습니다:

padding Filling

패딩을 사용하고 배경 클립을 사용하여 p의 수평 및 수직 중심을 달성합니다.

<p class="parent">  
<p class="children">
</p>
</p>

backgroun-clip을 콘텐츠 상자로 설정하고 배경을 콘텐츠 영역의 바깥쪽 가장자리로 자른 다음 패딩을 사용하여 다음과 같이 설정합니다. 외부 p에서 내부 p를 뺀 차이의 절반 구현:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

효과는 다음과 같습니다.

여백 채우기

다음으로 수평 및 수평을 달성하기 위한 여백 채우기 방법을 소개합니다. 수직 센터링.
먼저 부모와 자식 p를 정의합니다.

<p class="parent">
  <p class="children"></p>
</p>

여기서 자식 p의 margin-top을 부모 p 높이에서 자식 p 높이의 절반을 뺀 값으로 설정한 다음 오버플로를 숨김으로 설정하여 트리거합니다. 상위 p의 BFC 및 LESS 코드는 다음과 같습니다.

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

최종 센터링 효과는 다음과 같습니다.

절대 위치 지정

위치 사용: 위쪽은 절대, 왼쪽은 50%, 그리고 여백을 다음으로 설정합니다. p를 수평 및 수직으로 중앙에 배치하려면 먼저 부모-자식 p를 정의해야 합니다:

<p class="parent">
  <p class="children"></p>
</p>

그런 다음 해당 CSS를 설정해야 합니다:

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

여백의 값은 p 너비의 절반입니다. :

text-align centered

우리 모두 알고 있듯이 text-align은 p의 내용을 수평으로 중앙에 정렬할 수 있습니다. 하지만 이 p에서 하위 p를 중앙에 배치하려면 어떻게 해야 할까요? sub-p의 표시를 인라인 블록으로 설정할 수 있습니다.

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

flex centering

마지막으로 CSS3의 display:flex로 구현한 가로, 세로 센터링 방식을 소개하겠습니다.

<p class="parent">
  <p class="children">我是通过flex的水平垂直居中噢！</p>
</p>

rrree

효과는 다음과 같습니다.

위 내용은 CSS 속성을 사용하여 다양한 중심 채우기 방법을 구현하는 방법에 대한 자세한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!