第一种：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. python库安装中Microsoft Visual C++ is required解决方法

    在用pycharm过程中,用pip去安装一些第三方包的时候会出现如下错误,缺少C++编译器,因为有些程序需要使用,没有C++接口会报错,查阅相关资料及自己的解决方案 error: Microsoft ...

  2. javaScript阻止浏览器F5刷新

    1 <script type="text/javascript"> 2 //禁止用F5键 3 document.onkeydown = function (e) { 4 ...

  3. 微信小程序码生成及canvas绘制

    吐槽:某厂的开发文档写的跟屎一样 1.后台返回accessToken,小程序请求获取小程序码 uni.request({ url: 'https://api.weixin.qq.com/wxa/get ...

  4. 通信原理：基于MATLAB的AM调幅分析

    目的: 通过matlab仿真AM调制,通过图像分析来更好的了解AM调制的过程 1.为什么基带信号要加上一个直流分量. 2.所加直流分量为什么要大于基带信号的最大值. 3.时域中调制信号与载波和基带信号 ...

  5. Linux上后台保持Terminal交互运行的三种方式：nohub、screen和tmux

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 后台运行 Linux上,如果一个进程需要保持后台运行,尤其是在Linux服务器上,后台运行程序.避免因为SSH连接断开而导致进程停止运行时,该怎么 ...

  6. 6月4日 python学习总结 装饰器复习

    1.  装饰器的原理以及为什么要使用装饰器 在代码运行期间动态增加功能的方式,称之为"装饰器"(Decorator). 在不影响原代码结构的情况下为其添加功能 2.  装饰器的基本 ...

  7. 《前端运维》五、k8s--1安装与基本配置

    一.k8s基础概念与安装 k8s,即kubernetes是用于自动部署,扩展和管理容器化应用程序的开源系统.详细的描述就不多说了,官网有更详细的内容.简单来说,k8s,是一个可以操作多台机器调度部署镜 ...

  8. 修道士与野人问题（BFS广度搜索）

    #include "iostream.h" #include "string.h" //定义一个状态节点 typedef struct //存储各个状态 { i ...

  9. 团队vue基础镜像选择思考

    前端镜像可以考虑使用nginx或者openresty; 镜像 大小 说明 nginx:1.20.2-alpine 8.41 MB 最小最新版本 nginx:1.21.4 50.95 MB 最新版本 n ...

  10. Spring Boot 增加删除修改 批量

    1.批量删除  a.自定义Repositoy中写 前台处理https://blog.csdn.net/yhflyl/article/details/81557670首先前台先要获取所有的要删除数据的I ...