CSS에서 페이지를 중앙에 배치하는 방법

CSS에서 페이지 중심을 설정하는 방법: 1. "text-align:center"는 수평 중심을 설정합니다. 2. "dispaly:flex" 설정은 가로 중앙에 있습니다. 3. "display:table-cell"은 수직 중심을 설정합니다. 4. "position:absolute"는 수직 중심을 설정합니다.

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

센터링은 CSS에서도 일반적으로 사용됩니다. 좀 더 친숙한 센터링 작성 방법을 요약하겠습니다. 물론, 더 좋은 글쓰기 방법이 있어야 하며, 기사에 부족한 부분이 있으면 바로잡아 주시기 바랍니다.

이제 다음 시나리오가 주어졌다고 가정해 보겠습니다:

<p class="parent">
  <p class="child">
    DEMO
  </p>
</p>

class='child'这个div中的内容长度是不一定的，现在需要实现这个div를 중심으로 한 것입니다.

1. 가로 가운데 맞춤

1.1 텍스트 정렬: 센터

블록 수준 상위 컨테이너에서 인라인 또는 인라인 유사 요소를 중앙에 배치하려면 text-align: center,
를 사용하세요. 이 방법은 inline/inline-block/inline-table/inline/flex를 중앙에 배치합니다.

rreee

child div的时候如果设置display: inline-block的时候需要注意每个div之间会有缝隙，这不是什么bug가 여러 개인 경우 속성은 다음과 같습니다.

이러한 공백을 제거하려면 다음과 같은 몇 가지 해결 방법이 있습니다.

1. HTML에서 공백을 제거합니다.

요소 사이에 공백이 있는 이유는 레이블 세그먼트 사이의 간격 때문입니다. 이때 HTML 사이의 간격만 제거하면 됩니다.

예를 들어 이런 글쓰기 방식은 물론 쓰는 방법은 여러 가지가 있으니 꼭 공백만 없애기만 하면 되지만, 이 방식은 쓰기에는 항상 조금 반인간적인 느낌이 듭니다.

.child {
  display:inline-block;
  /*子元素文字会继承居中，因此要在上面写上向左边居中*/
  text-align:left;
}
.parent {
  text-align:center;
}

2. 음수 여백 값을 사용하세요

이 방법의 음수 값은 결정하기가 쉽지 않으며 컨텍스트 글꼴 등과 관련이 있습니다. 이 방법은 대규모 사용에는 적합하지 않습니다.

<p class="parent">
  <p class="child">
  DEMO1</p
  ><p class="child">
  DEMO2</p
  ><p class="child">
  DEMO3</p>
</p>

3. 글꼴 크기: 0

를 사용하세요. 이 방법을 사용하면 상위 div的font-size设为0 ，然后记得将子div的font-size 속성을 다시 설정하기만 하면 이 간격 문제를 매우 간단하게 해결할 수 있습니다.

.child {
  margin-right; -5px;
}

4 문자 간격 또는 단어 간격을 사용하세요.

.parent {
  font-size: 0;
}
.chilc {
  font-size: 16px;
}

1.2 dispaly: flex

IE10+

.parent {
  letter-spacing: -5px;
  /*或者*/
  word-spacing: -5px;
}
.chilc {
  letter-spacing: 0;
  /*或者*/
  word-spacing: 0;
}

2와만 호환됩니다. 수직 중심

1.1display: table-cell

높이가 다른 요소는 수직으로 중앙에 배치될 수 있습니다.

.parent {
  display:flex;
  justify-content:center;
}
/*或者*/
.child{
  margin：0 auto;
}

2.2 위치: 절대

.parent {
  display:table-cell;
  vertical-align:middle;
}

권장 학습: CSS 비디오 튜토리얼

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