第一种：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. laravel报错 : No application encryption key has been specified.

    创建了新的laravel项目后, 运行提示:No application encryption key has been specified 解决方法: 这个是由于没有配置好 APP_KEY 在终端上 ...

  2. 二进制部署1.23.4版本k8s集群-6-部署Node节点服务

    本例中Master节点和Node节点部署在同一台主机上. 1 部署kubelet 1.1 集群规划 主机名 角色 IP CFZX55-21.host.com kubelet 10.211.55.21 ...

  3. Caffe2源码解析之core

    写在前面 在对Tensorflow的后端源码进行了拆解(参见tensorflow源码解析系列文章索引)之后,很想跟其它深度学习框架的实现进行对比,根据框架的流行程度,先选择了Pytorch.Pytor ...

  4. BSOJ6388题解

    看上去就很神秘...考虑建出图论模型. 我们将一张牌的两面 \(a,b\) 连一条边. 考虑一个连通块的意义是什么. 边是一张牌,容易发现,如果连通块是一棵树,那么选择一个根节点相当于可以打出除了根节 ...

  5. LGP5544题解

    题目大意 题意这么明显就不说了qwq 首先最值,而且也想不到啥解法,果断 \(\rm SA\). 然后是初始位置.初始位置就是 \(((\sum_{i=1}^m x)/m,(\sum_{i=1}^m ...

  6. LGP7167题解

    考试的一道题,因为某些原因sb了常数翻了好几倍/px 首先我们发现,一个水池的水只会向它下边第一个直径比它大的水池流. 我们把这些流动的关系连边,很容易发现是一棵树. 问水最后会到哪个水池相当于在问最 ...

  7. Kubernetes：Ingress总结(二)

    Blog:博客园 个人 参考:Ingress | Kubernetes.<Kubernetes进阶实战> Contour是Kubernetes Ingress控制器的另一款开源实现,它以高 ...

  8. spring——依赖注入的三种方式

    1 构造器注入(与构造器有直接关系) 默认无参构造 3种构造方式:通过<contructor-arg>调用类中的构造器 下标 <bean id="userService&q ...

  9. CentOS 通过shell脚本过滤得到服务器IP地址

    1.CentOS 6.x (32Bit &&64Bit) [root@localhost ~]# ifconfig |grep Bcast |awk '{print$2}' |sed ...

  10. xssgame记录

    xss地址:http://www.xssgame.com/ 直接插入标签 构造语句,注意闭合 注意寻找输出点,这个会进行一次urlencode,和浏览器有关系,firefox过不了 javascrip ...