第一种：display:table-cell

组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。

这在子元素不确定宽高和数量时，特别实用！
 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <meta http-equiv="X-UA-Compatible" content="ie=edge">

 6     <title>Demo001_displayTable</title>

 7     <style>

 8         /*** table-cell middle center组合使用 ***/

 9         .cell {

10             display: table-cell;

11             vertical-align: middle;

12             text-align: center;

13             width: 240px;

14             height: 180px;

15             border:1px solid #666;

16         }

17     </style>

18 </head>

19 <body>

20     <div class="cell">

21         <p>我爱你</p>

22     </div>

23     <div class="cell">

24         <p>我爱你</p><p>亲爱的中国</p>

25     </div>

26     <div class="cell">

27         <p>我爱你</p><p>亲爱的中国</p><div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>

28     </div>

29 </body>

30 </html>

 第二种 transform:translate(-50%,-50%)

translate()函数是css3的新特性，在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。

当使用：top:50%, left:50%，是以左上角为原点，故不处于中心位置。

translate(-50%, -50%)作用是，往上（X轴），左（Y轴）移动自身长度的50%，以使其居于中心位置。
与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，


tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中
.content {

　　 padding:10px;

    background:green;

    color:#fff;

    position:absolute;

    top:50%;

    left:50%;

    border-radius: 5px;

    -webkit-transform: translate(-50%,-50%);

    -moz-transform: translate(-50%,-50%);

    transform:translate(-50%,-50%);

}

第三种用弹性布局实现垂直左右居中

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4   <meta charset="UTF-8">

 5   <title>Document</title>

 6   <style type="text/css">

 7   *{

 8       margin: 0;

 9       padding: 0;

10   }

11   .wrap{

12       width: 100px;

13       height: 100px;

14       border: 1px solid #000;

15       margin: 3.125em auto;

16       display: flex;

17       justify-content: center;

18       align-items: center;

19

20   }

21   .in{

22       width: 10px;

23       height: 10px;

24       background: #000;

25       border-radius: 50%;

26   }

27   </style>

28 </head>

29 <body>

30   <div class="wrap">

31       <div class="in"></div>

32   </div>

33 </body>

34 </html>
display:flex; 设置.wrap为弹性布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

css3种不知道宽高的情况下水平垂直居中的方法的更多相关文章

  1. css3水平垂直居中（不知道宽高同样适用）

    css水平垂直居中 第一种方法: 在父div里加: display: table-cell; vertical-align: middle; text-align: center; 内部div设置: ...

  2. 关于WCF服务在高并发情况下报目标积极拒绝的异常处理

    最近弄了个wcf的监控服务,偶尔监控到目标服务会报一个目标积极拒绝的错误.一开始以为服务停止了,上服务器检查目标服务好好的活着.于是开始查原因. 一般来说目标积极拒绝(TCP 10061)的异常主要是 ...

  3. WCF服务在高并发情况下报目标积极拒绝的异常处理 z

    http://www.cnblogs.com/kklldog/p/5037006.html wcf的监控服务,偶尔监控到目标服务会报一个目标积极拒绝的错误.一开始以为服务停止了,上服务器检查目标服务好 ...

  4. Linux的虚拟内存管理-如何分配和释放内存，以提高服务器在高并发情况下的性能，从而降低了系统的负载

    Linux的虚拟内存管理有几个关键概念: Linux 虚拟地址空间如何分布?malloc和free是如何分配和释放内存?如何查看堆内内存的碎片情况?既然堆内内存brk和sbrk不能直接释放,为什么不全 ...

  5. 单链表在不知头结点的情况下对第i个元素的删除

    一.首先,看看单链表中第i个元素的删除: Status ListDelete_L (LinkList &L,int i,ElemType &e){ //在带头结点的单链表L中,删除第i ...

  6. Jackson高并发情况下，产生阻塞

    情况:在高并发情况下,查看线程栈信息,有大量的线程BLOCKED. 从线程栈得知,线程栈中出现了阻塞,锁在了com.fasterxml.jackson.databind.ser.SerializerC ...

  7. 在Load average 高的情况下如何鉴别系统瓶颈

    在Load average 高的情况下如何鉴别系统瓶颈.是CPU不足,还是io不够快造成? 或是内存不足? 一:查看系统负载vmstat procs -----------memory-------- ...

  8. 高并发情况下分布式全局ID

    1.高并发情况下,生成分布式全局id策略2.利用全球唯一UUID生成订单号优缺点3.基于数据库自增或者序列生成订单号4.数据库集群如何考虑数据库自增唯一性5.基于Redis生成生成全局id策略6.Tw ...

  9. c# redis 利用锁（StackExchange.Redis LockTake）来保证数据在高并发情况下的正确性

    之前有写过一篇介绍c#操作redis的文章 http://www.cnblogs.com/axel10/p/8459434.html ,这篇文章中的案例使用了StringIncrement来实现了高并 ...

随机推荐

  1. petite-vue源码剖析-双向绑定`v-model`的工作原理

    前言 双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用 ...

  2. windows下后台启动PHP,Nginx,Redis(使用RunHiddenConsole)

    启动命令(红色代码可选): 启动PHP RunHiddenConsole D:/phpStudy/PHPTutorial/php/php-5.6.27-nts/php-cgi.exe -b 127.0 ...

  3. 完全激活win server 2012的方法（亲测可行！）

    1.从微软官网下载评估版. 2.运行->CMD(最好以管理员身份运行)->输入"DISM /online /Get-CurrentEdition"(最好直接复制粘贴,然 ...

  4. pd.merge操作的on参数解释

    # 同时传入两个Key,此时会进行以['key1','key2']列表的形式进行对应,left的keys列表是:[['K0', 'K0'],['K0', 'K1'],['K1', 'K0'],['K2 ...

  5. 七天接手react项目 系列

    七天接手react项目 背景 假如七天后必须接手一个 react 项目(spug - 一个开源运维平台),而笔者只会 vue,之前没有接触过 react,此刻能做的就是立刻展开一个"7天 r ...

  6. QFramework Pro 开发日志（七）v0.4 版本审核通过 与 对话编辑器功能预告

    经过一周的工作,v0.4 版本总算完成了. 就在刚刚笔者在 AssetStore 提交了 v0.4 版本. v0.4 版本主要内容有两个 一键生成简单继承类图功能 底层兼容 QFramework v0 ...

  7. 使用MariaDB backup恢复主从

    安装 yum install MariaDB-backup 备份命令 工具需要直接操作数据目录,需要在数据库服务器上执行 mariabackup --backup --target-dir=/data ...

  8. YCCMS 3.3 CSRF漏洞--代码执行

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2.点击新建项目按钮,弹出对画框中选择(C:\ ...

  9. iscsi挂载

                                                                         iscsi挂载 1.server端:   (1) yum -y ...

  10. leedcode算法分类