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. [转帖]linux操作系统测试工具

    linux操作系统测试工具 http://cfdtesting.com/879156.html 作者: minions_222      来源: CFDTesting.com采编      发布于:  ...

  2. Java的设计模式（7）— 生产者-消费者模式

    生产者-消费者模式是一个经典的多线程设计模式,它为多线程间的协作提供了良好的解决方案.这个模式中,通常有两类线程,即若干个生产者线程和若干个消费者线程.生产者线程负责提交用户请求,消费者线程则负责具体 ...

  3. Visual Studio 设置为 UTF-8 保存格式

    1. 步骤 Visual Studio 提供高级保存选项功能,它能指定特定代码文件的编码规范和行尾所使用的换行符. 在 VS 中,该命令没有默认显示在「文件」菜单中.用户需要手工设置,才能显示该命令. ...

  4. C之typedef

    1.1 typedef 解析: 1.typedef是一个关键字: 2.typedef它的对象必须是一个类型: 3.作用:给类型取一个别名 1.2 typedef 格式 : typedef  类型    ...

  5. P5200 [USACO19JAN]Sleepy Cow Sorting

    P5200 [USACO19JAN]Sleepy Cow Sorting 题目描述 Farmer John正在尝试将他的N头奶牛(1≤N≤10^5),方便起见编号为1…N,在她们前往牧草地吃早餐之前排 ...

  6. firefox 获取xpath

    在做一个爬虫是,输入内容后,会自动显示内容,而且只能选择,不能根据输入的提交,一点就失去焦点,找不到相关内容 后来发现firefox的查看元素的最左边的类似于鼠标尖头的按钮,就是确保这种情况下,去查找 ...

  7. sublime3 安装markdown插件

    sublime3 安装markdown插件 第一步安装package control 自动安装package control 手动安装package control 安装具体的markdown相关的p ...

  8. vim常用命令的使用

    中文博客:https://www.cnblogs.com/lijia0511/p/5644566.html 英文原文:http://yannesposito.com/Scratch/en/blog/L ...

  9. 【HC89S003F4开发板】 8c转义成汇编工程

    HC89S003F4开发板建立汇编工程 选择编译文件 @选用开发板闪灯例程,将例程删除多余的注释,后面生成的文件会更直观. #define ALLOCATE_EXTERN #include " ...

  10. DNS 解析

    DNS即为Domain Name System的缩写形式,就是所谓的域名系统,它是互联网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网. 如果想访问某个网站( ...