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. [转帖]六种Socket I/O模型幽默讲解

    六种Socket I/O模型幽默讲解 https://www.cnblogs.com/jikebiancheng/p/6225009.html 原贴已经找不到了.. 老陈有一个在外地工作的女儿,不能经 ...

  2. [VS] - EntityFrameworkCore 2.0 安装失败 之解决

    背景 在 Visual Studio 2017 中,使用 Nuget 包管理器安装 EntityFrameworkCore 2.0 失败.切换至程序包控制器管理台,查看 Error Message: ...

  3. git使用mvn clean install 报错原因排查

    使用命令行git-bath.exe 来拉代码并进行编译之类的服务,结果在拉依赖时一直报错连的是144.131.254.26,看了maven的setting配置 文件 没并没有错, 最终定位问题是 gi ...

  4. golang的for循环基本语法

  5. OSS服务和自建服务器存储对比

    1 OSS 1.1 什么是OSS   阿里云对象存储服务(Object Storage Service,简称OSS),是阿里云提供的海量.安全.低成本.高可靠的云存储服务.它是一个分布式的对象存储服务 ...

  6. 在论坛中出现的比较难的sql问题：23(随机填充问题)

    原文:在论坛中出现的比较难的sql问题:23(随机填充问题) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必要记录下 ...

  7. Python实现行列式计算

    数学公式: 代码: # 逆序数 def getInversion(numlist): count = 0 for i in range(1,len(numlist)): subscript = num ...

  8. VBA事件（十七）

    在VBA中,要手动更改单元格或单元格值范围时,可以触发事件驱动的编程. 更改事件可能会使事情变得更容易,但您可以非常快速地结束一个完整的格式化页面.VBA中有两种事件 - 工作表事件 工作簿事件 工作 ...

  9. [LeetCode] 121. 买卖股票的最佳时机 ☆(动态规划)

    https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock/solution/xiang-xi-tong-su-de-si-lu- ...

  10. hashmap，hashtable，concurrenthashmap多线程下的比较（持续更新）

    1.hashMap 多线程下put会造成死循环,主要是扩容时transfer方法会造成死循环. http://blog.csdn.net/zhuqiuhui/article/details/51849 ...