方法一:使用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. OpenCASCADE圆与平面求交

    OpenCASCADE圆与平面求交 eryar@163.com 在 解析几何求交之圆与二次曲面中分析了OpenCASCADE提供的类IntAna_IntConicQuad可以用来计算圆与二次曲面之间的 ...

  2. 提前关闭Scrapy爬虫的设置

    Scrapy的CloseSpider扩展会在满足条件时自动终止爬虫程序.可以设置CLOSESPIDER_TIMEOUT(秒).CLOSESPIDER_ITEMCOUNT.CLOSESPIDER_PAG ...

  3. vue elment.style样式修改（第三方组件自生成元素）

    参考:https://blog.csdn.net/dcxia89/article/details/80402490         https://blog.csdn.net/jianglibo102 ...

  4. Teigha的BlockTableRecord获取方法

    Teigha的db(即database)可以有很多BlockTableRecord,可以用 OdDbBlockTablePtr blkTbl = db->getBlockTableId().op ...

  5. MapReduce深入理解输入和输出格式（1）-输入分片与记录

    一个输入分片( in put split)就是能够被单个map 操作 处理的输入块. 每一个map 操作只处理一个输入分片,并且一个一个地处理每条记录,也就是一个键/值对.输入分片和记录都是逻辑上的, ...

  6. 如何在Mac上切换python2和python3以及下载安装包 & 在Mac上如何查找系统自带python2.7的路径

    电脑:系统是Mac OS  系统自带python2.7  自己下载安装了python3.6 问题:一开始我想在终端下执行python2的相关代码   例如 python kNN.py (kNN.py这 ...

  7. NOIP2018崩崩记

    比赛前,做做往年的题目,嗯,似乎都很水,400+绝对没问题,如果完全发挥,起码500+. 然而-- Day0 这天是运动会,信息学的同学们向老师请假来机房. 然后我在机房里刷往届的题目,信心倍增. 最 ...

  8. vue 学习 二

    动画 <transition name="fade"> <p v-if="show">hello</p> </tran ...

  9. Django项目：CRM(客户关系管理系统)--78--68PerfectCRM实现CRM业务流程(bpm)报名缴费分页

    # pagination.py # ————————68PerfectCRM实现CRM业务流程(bpm)报名缴费分页———————— from django.utils.safestring impo ...

  10. 用Jmeter参数化实现接口自动化测试

    本文记录如何使用Jmeter参数化(csv)实现接口自动化——测试Token不同入参情况下,接口请求能够返回正确的结果 1. 首先需要使用Jmeter获取一个Token,如何获取暂略(同一般访问请求方 ...