使用 CSS 实现垂直居中的8种方法

wincheshe

已于 2023-02-07 16:59:45 修改

阅读量10w+

点赞数 64

分类专栏：前端 -- CSS 文章标签：面试 javascript 前端 css3 html5

于 2022-03-25 16:53:37 首次发布

本文链接：https://blog.youkuaiyun.com/m0_52409770/article/details/123739874

版权

前端 -- CSS 专栏收录该内容

8 篇文章

订阅专栏

CSS垂直居中的8种方法

1、通过vertical-align:middle实现CSS垂直居中。

2、通过display:flex实现CSS垂直居中。

3、通过伪元素:before实现CSS垂直居中。

4、通过display:table-cell实现CSS垂直居中。

5、通过隐藏节点实现CSS垂直居中。

6、已知父元素高度通过transform实现CSS垂直居中。

7、到垂直居中的位置。

8、通过line-height实现CSS垂直居中。

1、通过vertical-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。

在使用vertical-align：middle的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。vertical-align对齐的方法是寻找兄弟元素中最高的元素作为参考。

看代码可能比较好理解：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
    .wrapper {
      width: 500px;
      height: 500px;
      background-color: pink;

      text-align: center;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: deepskyblue;

      display: inline-block;
      vertical-align: middle;
      margin: 0 auto;
    }

    .help {
      width: 0;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="box"></div>
    <div class="help"></div>
  </div>
</body>

</html>