方法一:使用CSS3 transform

父盒子设置：position:relative;

div设置：position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;

方法二：使用display:table-cell

父盒子设置：display:table-cell;text-align:center;vertical-align:middle;

div设置：display:inline-block;vertical-align:middle;

方法三：使用CSS3 flex

父盒子设置：display:flex;justify-content:center;align-items:center;

怎么让一个不定宽高的div垂直水平居中？的更多相关文章

  1. 不定宽高的DIV，垂直水平居中

    1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...

  2. css实现不定宽高的div水平、垂直居中

    一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE ...

  3. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  4. CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  5. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  6. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  7. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  8. 实现可调整宽高的DIV（左右拖动和上下拖动）

    前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...

  9. css3之transform属性实现div不定宽高垂直水平居中

    transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

随机推荐

  1. 信息安全-浏览器-CORS：CORS（跨域资源共享）

    ylbtech-信息安全-浏览器-CORS:CORS(跨域资源共享) 1.返回顶部 1. CORS,全称Cross-Origin Resource Sharing,是一种允许当前域(domain)的资 ...

  2. 基于SpringBoot的开源微信开发平台，Jeewx-Boot 1.0 版本发布

    项目介绍 JeewxBoot 是一款基于SpringBoot的免费微信开发平台.支持微信公众号.小程序官网.微信抽奖活动. Jeewx-Boot实现了微信公众号管理.小程序CMS.微信抽奖活动等基础功 ...

  3. java线程池的使用学习

    目录 1. 线程池的创建 2. 线程池的运行规则 3. 线程池的关闭 4. 线程池的使用场合 5. 线程池大小的设置 6 实现举例 1. 线程池的创建 线程池的创建使用ThreadPoolExecut ...

  4. 基础类型转化成String 转

    基础类型转化成String 在程序中你可能时常会需要将别的类型转化成String,有时候可能是一些基础类型的值.在拼接字符串的时候,如果你有两个或者多个基础类型的值需要放到前面,你需要显式的将第一个值 ...

  5. java连接SQLserver数据库模板代码

    package cn.mldn.lxh.dbc; import java.sql.Connection; import java.sql.DriverManager; public class Dat ...

  6. nosql BASE

  7. 构建HBase二级索引

  8. windows 常用的快捷键

    记录一些 windows 常用快捷键,待更新 Ctrl系列 快捷键 功能 Ctrl + C 复制 Ctrl + INSERT 复制 Ctrl + V 粘贴 Ctrl + Z 撤销 Ctrl + D 删 ...

  9. 次短路poj3463

    poj3463大意:统计最小的长度个数+统计最小的长度+1的个数,大概就是求最短路和次短路的条数更新的时候有5种情况,有个细节就是它得是二维的,一个表示节点编号,一个0/1表示它是次短路的还是最短路的 ...

  10. 二进制操作(1)–Bytes

    1,Bytes的单元被当作字符串处理. 例如: 有些介绍会声称上述程序会得到这样的结果:b'\x00\x00\x00\x00' 在python v2.7.10上是得不到此结果的. 实际上,如果 typ ...