最近由于工作的原因碰到一个问题,就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示,思考许久未找到合适办法,于是在网上找到一些办法在此总结记录下来方便以后的学习。

方法一:兼容IE67,但是当元素宽度大于50%时,会出现滚动条。

<div class="father">
<div class="child">这个是需要剧中的元素,宽度不确定</div>
</div> .father {
display: inlien-block; //使.father得宽度适应.child的宽度
background-color: grey; // 方便看到.father元素
position: relative;
left: 50%;
}
.child {
position: relative;
left: -50%;
}

效果如下:

思路如下:

外层设置为float:left或者display:inline-block,然后设置相对定位,left:50%,这样左边位置就偏移到了中间的位置;然后内层设置相对定位,left:-50%,这样正好向左偏移自身宽度的一半,实现了居中。

方法二:兼容ie67

<div class="father">
<div class="child">这个是需要剧中的元素,宽度不确定</div>
</div> .father {
text-align: center; //设置该属性是为了让.father里面的 **内联** 元素居中。
}
.child {
display: inlne-block;
border:1px solid red;
*display: inline; /*主要用于激活IE中的hasLayout属性,兼容IE67*/
*zoom:1; /*主要用于激活IE中的hasLayout属性,兼容IE67*/
}

效果如下:

思路如下:

外层使用text-align为center是为了让里面的内联元素居中,很显然在外层设置text-align:center后,我们让里面的元素变成内联元素即可,则可以对里面元素使用display:inline-block;*display:inline(兼容IE6-7)。

IE浏览器的hasLayout属性,参考:https://baike.so.com/doc/6747002-6961548.html

未知元素水平垂直居中,参考:http://demo.doyoe.com/css/alignment/, https://www.cnblogs.com/jogen/p/5213566.html

div元素宽度不定的情况下如何居中显示的更多相关文章

  1. 编写高质量代码改善C#程序的157个建议——建议16:元素数量可变的情况下不应使用数组

    建议16:元素数量可变的情况下不应使用数组 在C#中,数组一旦被创建,长度就不能改变.如果我们需要一个动态且可变长度的集合,就应该使用ArrayList或List<T>来创建. 而数组本身 ...

  2. div样式text-align在子元素缩进不规范的情况下,chrome出现的问题(貌似结果是inline-block导致的)

    在调css的时候,发现居然有firefox实现效果完整而chrome出现问题的情况: 详细情况:segmentfault1 segmentfault2 全文表达: <html><he ...

  3. div在不固定高度的情况下垂直或者水平居中

    方法一: 用一个"ghost"伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧妙.但是这个方法要求待居中的元素是 inl ...

  4. laravel项目return back()->withErrors($validator)或return back()->with('errors','原密码错误!')在前台原密码错误的情况下不能正确显示错误信息,变成报错!

    被折磨的答案是 php artisan --version看一下版本,如果是5.2.26以上的,在路由处删除web中间件分组,还有问题再反馈

  5. 转:CSS设置HTML元素的高度与宽度的各种情况总结

    1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;">     < ...

  6. css3种不知道宽高的情况下水平垂直居中的方法

    第一种:display:table-cell 组合使用display:table-cell和vertical-align.text-align,使父元素内的所有行内元素水平垂直居中(内部div设置di ...

  7. Android手机在不同分辨率情况下字体自适应大小

    两种解决方法: 一. 1.首先根据不同分辨率获取不同字体大小. 在RES里创建values-480x320/strings.xml 里面设置<dimen name="Text_size ...

  8. Cygwin 各种情况下中文乱码--终极解决方案

    0.引言 本人从进公司以来一直负责公司Android平台下产品的NDK开发,用的工具: 01. Google的adt-bundle(集成了eclipse和sdk) 02. NDK 03. Cygwin ...

  9. 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法

    关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法 题设: 经常使用FusionCharts图表的朋友可能会遇到这个问题.就是在FusionCharts显示的时候有时候 ...

随机推荐

  1. R语言高性能编程(三)

    一.使用并行计算加倍提升性能1.数据并行 VS 任务并行实现数据并行的算法scoket 并行性注意并行计算时间并不与执行任务的计算资源数目成正比(计算机核心),amdahl定律:并行代码的速度受限于串 ...

  2. python基础(二)-------数据类型

    python开发基础篇(二)数据类型 python数据类型有: 1.数字 1.只能存放一个值 2.一经定义,不可更改 3.直接访问 主要的分类为:整型,长整型,(python2有长整型的概念Pytho ...

  3. 前端面试题系列(1):doctype作用 标准模式与兼容模式

    1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...

  4. maven学习之二

    三 profile介绍 可以有多个地方定义profile.定义的地方不同,它的作用范围也不同. (1)    针对于特定项目的profile配置我们可以定义在该项目的pom.xml中. (2)     ...

  5. Javascript日期类型的妙用

    http://heeroluo.net/Article/Detail/110 获取某个月份的天数 相信大家读小学的时候就知道一年十二个月各有多少天了,这里面有个特殊的存在——2月.闰年的2月有29天, ...

  6. 两种数据传输的方式——get和post。

    Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响.虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一 ...

  7. 魔方NewLife.Cube升级v2.0

    魔方是一套集成权限管理的MVC管理后台,最具特色功能是模版覆盖机制,是XCode实体类的最佳搭档! v2.0.2017.1126   借助Ajax支持高级操作,如:删除选中.批量启用禁用等 用户管理增 ...

  8. C语言之浮点数

    #include<stdio.h> int main(){printf("请分别输入身高的英尺和英寸," "如输入\"5 7\"表示5英尺 ...

  9. 【正则表达式】--python(表示字符)

    [前修知识] match :匹配    span:范围 match 是从头往后开始匹配,search不按照顺序,直接获取自己想要的,有就显示,没有就None r 代表反转义,前面也提到过这个知识,如果 ...

  10. Android 异步消息处理机制终结篇 :深入理解 Looper、Handler、Message、MessageQueue四者关系

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 一.概述 我们知道更新UI操作我们需要在UI线程中操作,如果在子线程中更新UI会发生异常可能导致崩溃,但是在UI线程中进行耗时操作又会导致ANR,这 ...