第一种：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. xshell + xftp 安装及1603错误解决

    xshell + xftpan下载安装 百度网盘下载链接:https://pan.baidu.com/s/14orvEWDjFkrLvr_9JaG4Gw 提取码:om9z 下载地址 https://w ...

  2. 关于vue3的inheritAttrs属性和$attrs的部分用法

    当我们在父组件中想要为子组件的某一个标签添加一些样式(注意,这里的是指attributes,css样式只是其中一种属性而已) <show-message id="lkx" c ...

  3. mysql 创建临时表

      创建临时表 create TEMPORARY table SalesSummary( product_name VARCHAR(50) NOT NULL, total_sales DECIMAL( ...

  4. 域渗透 | kerberos认证及过程中产生的攻击

    ​文章首发于公众号<Z2O安全攻防>​ 直接公众号文章复制过来的,排版可能有点乱, 可以去公众号看. https://mp.weixin.qq.com/s/WMGkQoMnQdyG8UmS ...

  5. isro

    靶机准备 将下载的压缩文件解压,打开vmx文件即可 将网络模式设置为NAT 扫描获得ip:192.168.164.185 kali:192.168.164.137 netdiscover -r 192 ...

  6. 让编程更轻松的 7 个 Visual Studio 扩展 : 以下几个扩展，BuildVision可以用

    是时候升级你最喜欢的IDE了!在这篇文章中,我将介绍一些我最喜欢的与众不同的 Visual Studio 扩展,是它们让我的日常编程工作变得更加轻松.对于一些明摆着的,例如 ReSharper 和 O ...

  7. RestTemplate踩坑 之 ContentType 自动添加字符集

    写在前边 最近在写 OAuth2 对接的代码,由于授权服务器(竹云BambooCloud IAM)部署在甲方内网,所以想着自己 Mock 一下授权方的返回体,验证一下我的代码.我这才踩到了坑-- 故事 ...

  8. loj2985「WC2019」I 君的商店(二分，思维)

    loj2985「WC2019」I 君的商店(二分,思维) loj Luogu 题解时间 真的有点猛的思维题. 首先有一个十分简单的思路: 花费 $ 2N $ 确定一个为 $ 1 $ 的数. 之后每次随 ...

  9. CF1430F Realistic Gameplay (贪心+DP)

    朴素做法暴力DP,O(nk)过不去... 1 #include <cmath> 2 #include <cstdio> 3 #include <cstring> 4 ...

  10. 如何获取 topic 主题的列表?

    bin/kafka-topics.sh --list --zookeeper localhost:2181