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. Tomcat中不能通过访问自己IP，但可以通过localhost/127.0.0.1访问

    一.问题如下:局域网内,自己机器部署了一个tomcat应用,在本机上可以通过如下方式访问引用.  http://localhost:8080/xxxx http://127.0.0.1:8080/xx ...

  2. C++_自引用指针this

    自引用指针this 例 3.1 this指针的引例 #include<iostream.h> class A{ public: A(int x1){ x=x1; } void disp() ...

  3. PAT(B) 1052 卖个萌（Java：0分 待解决，C：20分）

    题目链接:1052 卖个萌 (20 point(s)) 题目描述 萌萌哒表情符号通常由"手"."眼"."口"三个主要部分组成.简单起见,我们 ...

  4. WUSTOJ 1332: Prime Factors（Java）

    题目链接:1332: Prime Factors Description I'll give you a number , please tell me how many different prim ...

  5. 5-24 c++语言之【基础知识】

    最近一段时间继续开始了c++的学习,作为c plus plus 难免会与c语言做一个对比,很明显的感受到c++语言注重代码的复用性和拓展性,而c语言更加注重其算法的高效性,这也是今后需要注意的地方,避 ...

  6. Spring Cloud Alibaba学习笔记（7） - Sentinel规则持久化及生产环境使用

    Sentinel 控制台 需要具备下面几个特性: 规则管理及推送,集中管理和推送规则.sentinel-core 提供 API 和扩展接口来接收信息.开发者需要根据自己的环境,选取一个可靠的推送规则方 ...

  7. WPF不同方式快捷键判断

    private void Window_PreviewKeyDown(object sender, KeyEventArgs e) { //单个按键e.Key方式判断 if (e.Key == Key ...

  8. 转 C# GDI+ 实现橡皮筋技术

    http://www.cnblogs.com/arxive/p/6080085.html 应该有很多人都在寻找这方面的资料,看看下面我做的,或许对你会有所帮助,但愿如此. 为了实现橡皮筋技术,我用了两 ...

  9. win7用驱动精灵安装了bcm94352ac蓝牙驱动后还是不能用蓝牙的解决方法

    驱动精灵安装了驱动后,设备管理器处显示Bluetooth USB,但是没法用蓝牙,找不到蓝牙图标,后来在华硕官方下载了win7的Broadcom 蓝牙驱动程序装上之后就好了

  10. 链接标签<a>去掉下划线

    1.去掉下划线 text-decoration:none: