CSS에서 수직 센터링을 달성하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 수직 센터링을 달성하는 방법은 무엇입니까?

王林

Mar 23, 2020 am 10:31 AM

css수직으로 중앙에 위치

CSS에서 수직 센터링을 달성하는 방법은 무엇입니까?

CSS에서 수직 센터링을 달성하는 방법은 다음과 같습니다:

1. 라인 높이를 사용하여 센터링을 달성합니다.

<!-- css -->
<style>
.parents {
  height: 400px;
  line-height: 400px;
  width: 400px;
  border: 1px solid red;
  text-align: center;
}

.child {
  background-color: blue;
  color: #fff;
}
 </style>
</head>

<body>
<!-- html -->
<div class="parents">
   <span class="child">css布局,实现垂直居中</span>
</div>
</body>

효과:

CSS에서 수직 센터링을 달성하는 방법은 무엇입니까?

: CSS 튜토리얼 )

2. 상위 컨테이너의 상대 위치를 설정하면 하위 항목이 절대 위치를 설정하고 레이블은 여백을 통해 적응적으로 중앙에 배치됩니다. 레이아웃 flex 상위 설정 표시: flex; 하위는 적응형 중심화를 달성하기 위해 여백을 자동으로 설정합니다.

4 상위는 상대 위치를 설정하고, 하위는 변위 변환을 통해 달성됩니다. CSS에서 수직 센터링을 달성하는 방법은 무엇입니까?

<!-- css -->
<style>
.parents {
  height: 400px;
  width: 400px;
  border: 1px solid red;
  position: relative;
}

.child {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background-color: blue;
  /* 四个方向设置为0, 然后通过margin为auto自适应居中 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
 </style>
</head>

<body>
<!-- html -->
<div class="parents">
  <span class="child">css布局,实现垂直居中</span>
</div>
</body>

효과:

5. 부모는 유연한 상자를 설정하고 유연한 상자의 관련 속성을 설정합니다. CSS에서 수직 센터링을 달성하는 방법은 무엇입니까?

  <!-- css -->
  <style>
    .parents {
      height: 400px;
      width: 400px;
      border: 1px solid red;
      display: flex;
    }

    .child {
      width: 200px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #333;
      background-color: yellow;
      margin: auto;
  }
 </style>
</head>

<body>
 <!-- html -->
  <div class="parents">
    <span class="child">css布局,实现垂直居中</span>
  </div>
</body>

효과:

6. 양식을 생성한 다음 자식은 인라인 또는 인라인 블록을 설정합니다. (수직 정렬을 사용하기 위한 전제 조건은 중간에 인라인 요소와 표시 값이 table-cell인 요소라는 점에 유의해야 합니다.) CSS에서 수직 센터링을 달성하는 방법은 무엇입니까?

효과:

  <!-- css -->
  <style>
    .parents {
      height: 400px;
      width: 400px;
      border: 1px solid red;
      position: relative;
    }

    .child {
      width: 200px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #fff;
      background-color: green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <!-- html -->
  <div class="parents">
    <span class="child">css布局,实现垂直居中</span>
  </div>
</body>

관련 영상 튜토리얼 추천: CSS에서 수직 센터링을 달성하는 방법은 무엇입니까? css 영상 튜토리얼