方法一:使用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. IOS 检测摇晃 几个问题

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://kyoworkios.blog.51cto.com/878347/1152692 ...

  2. 最新MySQL5.7.3.0版本安装（图文版本）

    转自:http://www.myexception.cn/mysql/1609536.html 可以从http://dev.mysql.com/downloads/下载MySQL服务器安装软件包,我下 ...

  3. 对XP上的KiFastSystemCall进行浅析

    Windows API的系统调用过程通过KiFastSystemCall或int 2e进入内核,本文仅对XP上的KiFastSystemCall进行浅析. 以ntdll!ZwCreateProcess ...

  4. PAT甲级——A1091 Acute Stroke【30】

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  5. drools规则管理Guvnor的安装

    今天找了一圈没看到tomcat下如何安装Guvnor,自己试了安装一把把流程记录下来. 1.JBOSS官方下载Guvnor(或者网上找找很多war包) 2.下载tomcat,安装(保证8080 ind ...

  6. AIO异步非阻塞学习

    Client:客户端 package aio; import java.io.UnsupportedEncodingException; import java.net.InetSocketAddre ...

  7. 2018-10-19-C#-序列类为-xml-可以使用的特性大全

    title author date CreateTime categories C# 序列类为 xml 可以使用的特性大全 lindexi 2018-10-19 9:9:47 +0800 2018-6 ...

  8. vue-admin-template模板添加tagsview

    参考: https://github.com/PanJiaChen/vue-admin-template/issues/349 一.从vue-element-admin复制文件: vue-admin- ...

  9. List--列表合成

    1,基本规则是,一对中括号里面包含一个表达式,表达式里可以有for语句,还可以有分支的for或者if语句. 2,例如: 3,列表合成可以快速地合并多个列表. 例如: 当然还可以直接加:[1, 2, 3 ...

  10. 苹果系统 IOS 12 的H5 BUG ：键盘把页面顶上去了，底下留有一块空白区域

    苹果以往的系统是没问题的,一般情况下,点击input唤起键盘后是会自动显示到输入框的地方,然后收起键盘页面就会恢复到底部. 但是如果苹果是已经更新到最新的IOS12的话就会发生一个BUG ,就是键盘唤 ...