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. JavaSE进阶核心之class类

    Java顶级对象之Object 什么是Object类 Object类位于java.lang包中,java.lang包包含着Java最基础和核心的类,在编译时会自动导入 Object类是所有java类的 ...

  2. 使用pyqt5制作简单计分桌面应用

    这是一个自己写的使用pyqt5制作简单计分桌面应用的实例,希望对大家有所帮助.制作这个小程序的起因是因为有个艺术类比赛需要设计这个一个桌面程序,方便统分. (此程序尚存在部分小bug,请慎用,公开代码 ...

  3. UE4 WebUI使用指南2-通信

    前面一篇WebUI的文章讲述的WebUI插件的下载,开启,在UE中创建,加载网页等. 本文继续讲述通过WebUI,UE和网页实现双向通信的实现思路. 一点说明 由于WebUI 使用的浏览器内核并不是最 ...

  4. Centos7 安装 rabbitmq-server-3.7.7 图文教程

    下载 rabbitmq-server wget https://dl.bintray.com/rabbitmq/all/rabbitmq-server/3.7.7/rabbitmq-server-3. ...

  5. Pycharm+pytest+allure打造高逼格的测试报告

    环境前置提示:allure是基于Java的一个程序,需要Java1.8的环境,没有安装需要去安装一下. 如果在cmd中能输入java,获取到命令信息则不管,否则需要配置系统变量: 路径:计算机> ...

  6. 垃圾回收器比较：CMS 和 G1

    前言 在查看系统内存监控的过程中,发现有几台机器的内存使用率一直很高,而且是呈现一个不太正常的高度,初始以为是 GC 不完全,也就是 JVM 内有大量对象不能回收,于是采用 Arthas 诊断查看一下 ...

  7. 在Ubuntu 18.04 Desktop图形中配置静态和动态IP

    在Ubuntu 18.04 图形界面中配置静态和动态IP 设置静态ip 设置为dhcp动态获取ip

  8. AI围棋项目：KataGo

    网站地址: https://katagotraining.org/ 项目地址: https://github.com/lightvector/KataGo

  9. 【转载】 【报错】ImportError: cannot import name 'downsample' —— lasagne模块 调用 theano 报错

    原网址: https://blog.csdn.net/kz_java/article/details/125030733 ======================================= ...

  10. C# 命名空间和程序集 小记

    前言 本文只是为了复习,巩固,和方便查阅,一些知识点的详细知识会通过相关链接和文献标记出来. 命名空间 1.1 概念 可以把命名空间看做字符串,他加在类名或类型名前面并且通过点进行分割 既然看做是字符 ...