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. pytorch1.0实现GAN

    import torch import torch.nn as nn import numpy as np import matplotlib.pyplot as plt # 超参数设置 # Hype ...

  2. [转帖]中国x86服务器市场H1出货量大幅下滑：浪潮、戴尔和华为排名前三

    中国x86服务器市场H1出货量大幅下滑:浪潮.戴尔和华为排名前三 https://www.cnbeta.com/articles/tech/900237.htm 市场开始下滑了.. 据IDC<2 ...

  3. 又是a+b

    题目描述: 给定两个整数 a, b (a, b 均不超过 int 类型的表示范围),求出 a + b 的和.输入描述: 多组输入,每组输入为一行,里面有 2 个数 a, b.输出描述: 对于每一组输入 ...

  4. Python04之数据类型

    Python的数据类型主要有四类:整型.浮点型.字符串类型.布尔类型 整型:所有整数都属于整型(长整型和整型)         如:-121,0,765,89,12306 浮点型:数字上有小数点的数 ...

  5. teamviewer远程控制程序免费版百度云下载

    TeamViewer是一个远程共享桌面软件,使远程传输变得简单快速,远程访问安全可靠,能在任何防火墙后台进行远程控制.只需用户在两台计算机上同时运行这个软件就可以开始工作.使用时关闭杀毒软件,防止误报 ...

  6. linux环境，hidraw设备自动加载时默认权限的设置方法

    在linux系统中,hidraw设备会自动加载并设置默认权限,但系统的默认只允许root用户访问,普通用户是不允许读写. 设置的方法是修改udev的配置,配置路径是/etc/udev/rules.d/ ...

  7. 苹果appstore应用名下面的开发者名称填写或修改

    最近上架不小心遇到一个问题,开发者名称写错了,放假前大意了,记录一下修改过程,希望碰到同样问题的伙伴不要要着急,下面的内容可能帮你哦. 我们应用的之前的开发者名称是个人的,之前没注意这个问题,以后想注 ...

  8. Java 之 字节流

    一.一切皆为字节 一切文件数据(文本.图片.视频等)在存储时,都是以二进制数字的形式保存,都一个一个的字节,那么传输时一样如此.所以,字节流可以传输任意文件数据.在操作流的时候,我们要时刻明确,无论使 ...

  9. IOS开发之——绘图（CGContext）

    0 CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文 1 CGContextMoveToPoint 开始画线 2 CGContex ...

  10. FreeRTOS 移植

    添加FreeRTOS源码到工程中 在工程源码中创建FreeRTOS目录存放拷贝的文件 拷贝FreeRTOS->Source中的文件 可将其他不需要的文件夹全部删掉,只留3个 拷贝Demo中Fre ...