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>

div中多行内容垂直居中显示的更多相关文章

  1. IE8下div中2个button仅仅显示一个

    IE8下div中2个button仅仅显示一个,代码例如以下: <div id="adviceType" style="display: none;" &g ...

  2. 读取memo中某行内容

    方法1 可用以下代码读取Memo中指定行的内容: var   aLine:String; begin   aLine:=Memo1.Lines[2]; end; 在使用中,读取的行在Memo中需要保证 ...

  3. div中文字水平和垂直居中的css代码

    HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so ...

  4. [daily][troubleshoot][archlinux][wps][font] wps文档中的图内容无法显示中文

    序 用linux作为工作生产环境的几个需要解决的问题之一是:文档协作,即如何兼容Micro$oft Office格式的文档. 我一般的工作方式是:在linux下创建一个win7的虚拟机,安装常用的wi ...

  5. ASP.NET中读取excel内容并显示

    项目中经常会用到把excel的文件内容导入到数据库中的,刚刚花了点时间,做了个例子,基本上能实现导入Excel后显示的功能吧,导入的excel文件得是xls,即是2003的.     代码思路如下:要 ...

  6. 让块元素在div中水平居中，并且垂直居中的五种方法

    在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...

  7. div中文本水平居中，垂直居中

    div: text-align=center; hight=100px; line-hight=100px;(行高需要和高度设置成一样)

  8. html如何让label在div中的垂直方向居中显示？

    设置label的行高 line-height 和div的高度一致即可.

  9. 使用window.getSelection()获取div中选中文字内容及位置

    div添加一个弹出事件: $(document).ready(function () { $("#marked-area").mouseup(function (e) { $sco ...

  10. 仅支持webkit浏览器的多行内容超出显示省略号

    .box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; ...

随机推荐

  1. yb课堂之个人信息接口开发 《十三》

    根据token从查询个人信息接口开发 直接解密token,获取个人信息 通过token解密查询数据库获取个人信息 UserController.java package net.ybclass.onl ...

  2. SpringBoot实战：轻松实现接口数据脱敏

    引言 在现代的互联网应用中,数据安全和隐私保护变得越来越重要.尤其是在接口返回数据时,如何有效地对敏感数据进行脱敏处理,是每个开发者都需要关注的问题.本文将通过一个简单的Spring Boot项目,介 ...

  3. C# DataGridView控件用法大全

    动态添加新行 //方法一: int index = this.dataGridView1.Rows.Add(); this.dataGridView1.Rows[index].Cells[0].Val ...

  4. 【Vue】 vue-element-admin 路由菜单配置

    路由说明见官方文档: https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.htm ...

  5. 【WebSocket】一个简单的前后端交互Demo

    WebSocket资料参考: https://www.jianshu.com/p/d79bf8174196 使用SpringBoot整合参考: https://blog.csdn.net/KeepSt ...

  6. 【MongoDB】Re01 安装与基础操作

    Linux安装 官网下载红帽安装版 #下载三个rpm包 wget https://mirrors.tuna.tsinghua.edu.cn/mongodb/yum/el7-4.2/RPMS/mongo ...

  7. 【Java】java.util.ConcurrentModificationException

    异常提示信息: java.util.ConcurrentModificationException at java.util.LinkedHashMap$LinkedHashIterator.next ...

  8. 【JavaScript】下拉联动回显问题

    首先是多级下拉联动实现: 这是DOM结构: <div> <label style="margin-left: 10px;display: inline-block;&quo ...

  9. 【Dos-BatchPrograming】01

    --0. 1.文件后缀的延申 官方教程更推荐使用.cmd作为后缀 .cmd和.bat的区别: http://www.360doc.com/content/12/0810/09/3688062_2293 ...

  10. blender建模渲染Tips

    blender渲染 灯光的三种方式 1,常规灯光:shift+A选择灯光. 2,世界环境光:右侧地球图标调整. 3,物体自发光:把渲染物体变成一个发光体来进行调节灯光. 渲染视窗的调节 ctrl+b裁 ...