方法一:使用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. 《DSP using MATLAB》Problem 8.8

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  2. PKU--3628 Bookshelf 2（01背包）

    题目http://poj.org/problem?id=3628 分析:给定一堆牛的高度,把牛叠加起来的高度超过牛棚的高度. 且是牛叠加的高度与牛棚高度之差最小. 把牛叠加的高度看作是背包的容量,利用 ...

  3. Mysql 增加rownum

    Mysql 增加rownum 实现(极度推荐) mysql本身不像oracle那样使用 rownum 来显示行号的功能.但是可以使用设置变量的方式来实现这一功能. mysql使用 @ 定义用户变量, ...

  4. vue 监听返回

    mounted: function() { //使用keep-alive时可以放在activated内 if (window.history && window.history.pus ...

  5. 如何使用Pig集成分词器来统计新闻词频？

    散仙在上篇文章中,介绍过如何使用Pig来进行词频统计,整个流程呢,也是非常简单,只有短短5行代码搞定,这是由于Pig的内置函数TOKENIZE这个UDF封装了单词分割的核心流程,当然,我们的需求是各种 ...

  6. Netty TCP粘包/拆包问题《一》

    1.使用LineBasedFrameDecoder,StringDecoder解析器进行解决TCP粘包/拆包问题 2.代码搞起: TimeClient:客户端 /* * Copyright 2013- ...

  7. Find- Linux必学的60个命令

    1.作用 find命令的作用是在目录中搜索文件,它的使用权限是所有用户. 2.格式 find [path][options][expression] path指定目录路径,系统从这里开始沿着目录树向下 ...

  8. windwos API 第七篇 分离路径，组合路径 _splitpath _makepath

    函数原型: //Break a path name into components. void _splitpath( const char *path, char *drive, char *dir ...

  9. vue 基本知识

    1,内置事件对象event 原生JS事件中是直接通过传入 e 或者 event 就可以获取,但在vue中要传入 $event 才可以获取到内置事件对象 <body> <button ...

  10. python基础---递归函数 知识点自查填空题

    什么是递归函数:在函数中调()叫递归函数. 递归函数最大递归深度是997或998----是()设的限制. 注:如果递归次数太多,就不适合使用递归来解决问题. 递归的缺点: 占(). 递归的优点:会让代 ...