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>

 

posted @ 2021-03-10 17:24  BillyYang  阅读(264)  评论(0)  编辑  收藏  举报