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. 【转帖】IP地址总数

    http://blog.sina.com.cn/s/blog_ac1d70a40102xn8z.html 计算规则挺有意思的 私有IP地址段: A类:10.0.0.0到10.255.255.255 1 ...

  2. uwsgi03----直接部署

    1.http 和 http-socket的使用上有一些区别: http: 自己会产生一个http进程(可以认为与nginx同一层)负责路由http请求给worker, http进程和worker之间使 ...

  3. git基本使用及分支切换命令

    git init 生成本地仓库 git status  查看本地文件状态,未提交的文件显示红色 git add .  (点表示提交所有文件到暂存区,也可指定部分文件到暂存区,填写指定文件名加路径即可) ...

  4. h5开发微信公众号重定向到关注页面没有关注按钮 （微信你个坑）

    搜索微信公众号是这样的 微信公众号重定向到关注页面没有关注按钮 如何微信公众号重定向到关注页面没有关注按钮,请看上篇笔记 无解,微信一直在封这种通过链接跳转到公众号关注页面的方法.只有放个二维码提示长 ...

  5. Map、FlatMap 和 Reduce

    Map 作用是生成一个新数组,遍历原数组,将每个元素拿出来做一些变换然后 append 到新的数组中. [1, 2, 3].map((v) => v + 1) // -> [2, 3, 4 ...

  6. 题解-CTS2019氪金手游

    Problem \(\mathtt {loj-3124}\) 题意概要:给定 \(n\) 个点,\(w_i\) 分别有 \(p_{i,1},p_{i,2},p_{i,3}\) 的概率取 \(1,2,3 ...

  7. js new到底做了什么?如何重写new?（转）

    转自:https://blog.csdn.net/lyt_angularjs/article/details/86623988

  8. R_基础_01

    R语言介绍:R是一种区分大小写的解释型语言.R中有多种数据类型,包括向量.矩阵.数据框(与数据集类似)以及列表(各种对象的集合),广泛用于数据统计. R的特点:一次交互式会话期间的所有数据对象都被保存 ...

  9. 关于unity中的update、Lateupdate和FixedUpdate

    MonoBehaviour.Update 更新 当MonoBehaviour启用时,其Update在每一帧被调用. MonoBehaviour.FixedUpdate 固定更新 当MonoBehavi ...

  10. 关于Django auth注册登录模块的具体使用

    from django.urls import path from . import views urlpatterns = [ #主页,用来显示类别等其他数据 path('',views.index ...