第一种：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. 七牛云cdn加速

    https://developer.qiniu.com/fusion/1228/fusion-quick-start https://blog.csdn.net/qq_27292113/article ...

  2. laravel 7 登录

    1:路由,展示登录表单 Route::group(['prefix'=>'day','namespace'=>'day18'],function (){ // 登录 Route::get( ...

  3. 使用pip安装扩展包

    pip可以对python扩展包进行查找.下载.安装.卸载等

  4. 2022年官网下安装MongoDB最全版与官网查阅方法（5.0.6）

    一.下载安装 1.百度搜索,找到官网,或直接访问:https://www.mongodb.com/ 2.寻找下载位置,双击下载. 3.找到本地位置,双击执行,进入欢迎界面,选择next. 4.勾选协议 ...

  5. Django基础五之Ajax

    Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...

  6. 基于Python实现二分查找法实战

    二分查找法实战 def binary_search(datasets, find_in): mid = int(len(datasets)/2) if(mid>0): if(find_in> ...

  7. WPF 布局之综合实例

    WPF 布局之综合实例 <Window x:Class="UniFormGridDemo.MainWindow" xmlns="http://schemas.mic ...

  8. .NET MAUI 已在塔架就位 ，4月份RC

    最美人间三月天,春光不负赶路人.在充满无限希望的明媚春天里,一路风雨兼程的.NET 团队正奋力实现新的突破. 根据计划,新一代移动开发平台MAUI 将于4月份 发布RC. 目前,MAUI的测试工作和火 ...

  9. 实践：Linux下安装mysql8.0

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.下载mysql8.0安装包 1.在local创建mysql文件夹 cd /usr/local mkdir mysql cd mysql 2.使 ...

  10. CSV格式的文件与EXCEL文件的区别

    CSV格式的文件与EXCEL文件的区别 Excel CSV 这是一个二进制文件,它保存有关工作簿中所有工作表的信息 CSV代表Comma Separated Values .这是一个纯文本格式,用逗号 ...