Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?-CSS-Tutorial-php.cn

Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?

王林

Freigeben： 2020-03-23 10:31:13

nach vorne

2630 Leute haben es durchsucht

Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?

Die Methode zur vertikalen Zentrierung in CSS ist wie folgt:

1. Diese Methode eignet sich für reine Text >

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

Nach dem Login kopieren

Effekt:

Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?

(Empfohlenes Tutorial:

CSS-Tutorial)

2. Durch Festlegen des Relativen Positionierung des übergeordneten Containers, die absolute Positionierung des untergeordneten Containers wird auf der Ebene festgelegt und die Beschriftung wird durch den Rand adaptiv zentriert.

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

Nach dem Login kopieren

Effekt:

Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?

3. Flexible Layout-Flex-Elterneinstellungsanzeige: Flex; das untergeordnete Element stellt den Rand auf „Auto“ ein, um eine adaptive Zentrierung zu erreichen:

4. Das übergeordnete Element legt die relative Positionierung fest und das untergeordnete Element legt die absolute Positionierung fest. Dies wird durch die Verschiebungstransformation erreicht. Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?

5 box und legt die zugehörigen Eigenschaften der elastischen Box fest;

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

Nach dem Login kopieren

Effekt: Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?

6. Rasterlayout, das übergeordnete Element wird in eine Tabellenform umgewandelt und Anschließend wird das Kind durch Festlegen von Inline- oder Inline-Blöcken implementiert. (Es ist zu beachten, dass die Voraussetzung für die Verwendung von Vertical-Align: Middle Inline-Elemente und Elemente mit einem Anzeigewert von Table-Cell sind.)

Effekt: Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?

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

Nach dem Login kopieren

Empfohlene verwandte Video-Tutorials:

CSS-Video-Tutorial

Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!