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. django使用pyecharts(1)----django加入echarts

    Django 中使用 pyecharts.一.普通django加入echarts Django 模板渲染 Step 0: 新建一个 Django 项目 $ django-admin startproj ...

  2. 函数的第一类对象,f格式化,迭代器以及递归

    函数名的第一类对象及使用,f格式化以及迭代器 1.函数的第一类对象 第一类对象 --特殊点 1.可以当作值被赋值给变量 def func(): print(1) a = func a() 2.可以当作 ...

  3. (超实用)前端地址栏保存&获取参数,地址栏传输中文不在乱码

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://www.cnblogs.com/autoXingJY/p/115965 ...

  4. Docker学习笔记导航帖

    1. Docker安装 安装docker https://www.cnblogs.com/kreo/p/10813010.html

  5. Datatable批量导入到表

    封装批量提交数据到表,用于数据同步作业 private string GetSelectFieldNames(DataTable dataTable, string tableName = " ...

  6. 使用docker搭建reids主从，哨兵。

    Redis主从配置,如果没有真机就要用虚拟机,使用Docke for Windows host网络有问题. 准备: 1.安装虚拟机. 2.下载redis的安装文件:http://download.re ...

  7. Eclipse下使用Maven创建项目出现的archetype错误,记，转

    记自:http://blog.csdn.net/ZhuboSun/article/details/50099635 [1]出现的错误提示: Unable to create project from ...

  8. 实现CodeFirst自动数据迁移无需手动执行命令

    本主题假设您掌握了实体框架中 Code First 迁移的基本知识. 借助自动迁移功能,您无需对您所做的每一个更改都在程序包管理器控制台中手动Update-Database . 启用迁移 只需执行一次 ...

  9. Dijkstra+Heap模板

    普通Dijkstra: void DijkstraPath(int v0,int vis[],int dist[],int path[]) { int onePath[maxn]; int d; in ...

  10. 如何去把内容分享到whatsapp上?

    使用场景,公司利用whatsapp来推广商品,需要把商品和一些基本信息分享到WhatsApp上; 一:在html的head标签里面通过meta标签加上一些分享的基本网站信息,具体代码如下 <me ...