CSS利用vertical-align实现上下居中

最新推荐文章于 2024-07-12 20:13:17 发布

55145848

最新推荐文章于 2024-07-12 20:13:17 发布

阅读量2.6k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u012857153/article/details/73469385

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天在项目中需要用到类似element-ui中的message-box的弹窗功能，但是由于是原有项目的重构，element-ui的样式不同，不能直接使用，然后就自己手动实现一个遮罩弹框。查看了下element的源码，发现他们实现垂直水平居中的方式很好。就发出来大家一起学习。
实现：
1、外部一个容器div，类名为content吧，容器充满全屏，这是一个遮罩。text-align: center;
2、给content添加一个after伪类，这个伪类的display为inline-block。高度100%。宽度为0。设置vertical-align: middle
3、新建展示框div,类名为showpanel。然后同样display为inline-block，vertical-align: middle，这样即可实现垂直居中

直接上代码了。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .content {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
    }

    .content:after {
      content: "";
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle;
    }

    .showpanel {
      text-align: left;
      display: inline-block;
      /* margin: 0 auto; */
      vertical-align: middle;
      background-color: black;
      width: 420px;
      color: #fff;
      border-radius: 3px;
      font-size: 16px;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="showpanel">demo</div>
  </div>
</body>

</html>