css

.main{

    background: #999999;

    width: 600px;

    height: 400px;

    /*采用flex方式*/

    display: flex;

    /*div内容垂直居中*/

    align-items: center;

    /*div内容水平居中*/

    justify-content: center;

    text-align: justify;

}

html

<body >

<div  class="main">

    <!-- 居中的内容需要使用一个div包含 -->

    <div>

    <p>测试测试测试</p>

    <p>测试测试测试</p>

    <p>测试测试测试</p>

    </div>

</div>

效果图如下

div 里面内容水平垂直居中的更多相关文章

  1. div中的内容水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  2. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

  3. div中的“内容”水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  4. div 内容水平垂直居中

    对于前端布局来说.总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法.. 1.对于布局来说.一个div搞定. <div id ...

  5. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  6. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  7. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  8. 已知宽高和未知宽高的div块的水平垂直居中

    //已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } ...

  9. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

随机推荐

  1. SSM-CRUD

    一.项目介绍 前端技术:query+Bootstrap+ajax+json 后端技术:SSM(spring.springMVC.mybatis).JSR303校验 数据库:mysql 服务器:tomc ...

  2. RS232标准与TTL/COM小常识

    1.TTL电平标准 输出 L: <0.8V : H:>2.4V. 输入 L: <1.2V : H:>2.0V 2.CMOS电平标准 输出 L: <0.1*Vcc : H: ...

  3. Spyder中报错： Check failed: PyBfloat16_Type.tp_base != nullptr

    报错问题: 问题1:tensorflow/python/lib/core/bfloat16.cc:675] Check failed: PyBfloat16_Type.tp_base != nullp ...

  4. 机器学习-HMM隐马尔可夫模型-笔记

    HMM定义 1)隐马尔科夫模型 (HMM, Hidden Markov Model) 可用标注问题,在语音识别. NLP .生物信息.模式识别等领域被实践证明是有效的算法. 2)HMM 是关于时序的概 ...

  5. 优秀的java 社区

    并发编程网 - ifeve.com InfoQ - 促进软件开发领域知识与创新的传播开源中国 - 找到您想要的开源项目,分享和交流IBM developerWorks 中国 : IBM's resou ...

  6. 既有设计模式的lambda重构

    设计模式的博客要有模式的定义,UML类图,代码实现和模式的优缺点, 策略模式 工厂模式 模版方法 观察者模式 责任链模式 1 策略模式:定义了一组算法,并将每一个算法封装起来,使它们每一个之间可以相互 ...

  7. Neo4J之标签类型

    Neo4J的标签可以理解一个类,在创建一个节点时可以设置一个或多个标签: 1. 标签名为中文(可以) CRATE(节点名:标签1:标签2{属性1:34} 创建了一个节点名为“节点名”的节点(不可以用节 ...

  8. java封装数据类型——Byte

    Byte 是基本类型byte的封装类型.与Integer类似,Byte也提供了很多相同的方法,如 decode.toString.intValue.floatValue等,而且很多方法还是直接类型转换 ...

  9. English-培训1-Phonetic symbols

  10. bootstrap-table分页

    首先引用css: <link rel="stylesheet" type="text/css" href="css/bootstrap.css& ...