cari

Rumah  >  Artikel  >  hujung hadapan web  >  css中有哪些方法可以实现垂直居中

css中有哪些方法可以实现垂直居中

王林
王林ke hadapan
2020-03-23 10:31:132689semak imbas

css中有哪些方法可以实现垂直居中

css实现垂直居中的方法如下：

1、利用line-height实现居中，这种方法适合纯文字类的；

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

效果：

cf2107043f8587b8a39d71d4f3c1811.png

（推荐教程：CSS教程）

2、通过设置父容器相对定位，子级设置绝对定位，标签通过margin实现自适应居中；

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

效果：

35bcabfea590fb5cb7841e201d54757.png

3、弹性布局flex 父级设置display: flex; 子级设置margin为auto实现自适应居中；

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

效果：

9a1371f372f924ea7d2c3bd0715c4fe.png

4、父级设置相对定位，子级设置绝对定位，并且通过位移transform实现；

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

效果：

368fe3867a606d438284336fcd7ae2d.png

5、父级设置弹性盒子，并设置弹性盒子相关属性；

 <!-- css -->
 <style>
    .parents {
      height: 400px;
      width: 400px;
      border: 1px solid red;
      display: flex;
      justify-content: center; /* 水平 */
      align-items: center; /* 垂直 */
    }

    .child {
      width: 200px;
      height: 100px;
      color: black;
      background-color: orange;
    }
  </style>
</head>

<body>
  <!-- html -->
  <div class="parents">
    <span class="child"></span>
  </div>
</body>

效果：

6c1569ec27b4fceb8990290d14a1174.png

6、网格布局，父级通过转换成表格形式，然后子级设置行内或行内块实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

效果：

9a5d39375c8d1d473b006c7509a8c75.png

 <!-- css -->
 <style>
    .parents {
      height: 400px;
      width: 400px;
      border: 1px solid red;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    .child {
      width: 200px;
      height: 100px;
      color: #fff;
      background-color: blue;
      display: inline-block; /* 子元素设置行内或行内块 */
    }
  </style>
</head>

<body>
  <!-- html -->
  <div class="parents">
    <span class="child"></span>
  </div>
</body>

相关视频教程推荐：css视频教程

Atas ialah kandungan terperinci css中有哪些方法可以实现垂直居中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css auto display margin transform flex table
Kenyataan：
Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：详解css行内样式、内嵌样式与外部引用样式的使用方法Artikel seterusnya：css实现等高布局有哪些方式

Artikel berkaitan

Lihat lagi