div中多行内容垂直居中显示

div中多行内容垂直居中显示

一、css 样式

    .wrap {
      height: 200px;
      width: 200px;
      border: 1px solid #232323;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

二、效果图

三、完成代码示例

<html>
<header>
  <title>div中内容垂直居中</title>
  <style>
    .wrap {
      height: 200px;
      width: 200px;
      border: 1px solid #232323;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  </style>
</header>

<body>

  <div class="wrap">
    <span>显示内容1</span>
    <span>显示内容2</span>
  </div>

</body>

</html>

让每一天过的有意义！

查看全文

相关阅读:
2019/10/9 CSP-S 模拟测
 简单的面向对象
 魔术变量
 函数
 全局变量
 超级全局变量
 for循环
 while循环
 php数组排序
 python打造XslGenerator

原文地址：https://www.cnblogs.com/BillyYoung/p/14513035.html