div元素宽度不定的情况下如何居中显示

更新日期: 2019-07-31阅读量: 1066标签: 居中

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

方法一:兼容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>这个是需要剧中的元素,宽度不确定</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)。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/5033

css图片居中,通过纯css实现图片居中的多种实现方法

在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结。

CSS 不定宽高的垂直水平居中方式总汇

垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法,是的,你没有看错

css中line-height的理解_介绍line-height实际应用

css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同。line-height只影响行内元素和其他行内内容,而不会直接影响块级元素。line-height实际应用:图片水平垂直居中、多行文本水平垂直居中、用line-height代替height

html 元素垂直水平居中

不定宽高元素水平垂直居中:transform: translate(),flex 布局,利用justify-content和align-items 实现居中,使用table+table-cell实现垂直居中,display:inline-block;或margin: auto;实现水平居中

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。

安卓移动端line-height垂直居中出现偏移的原因,及解决方法

目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的。出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的。

如何让子元素在父元素中水平垂直居中七种方法?

第一种:定位+margin:auto,注意:兼容性较好,缺点:不支持IE7以下的浏览器.第二种:定位+margin-left+margin-top注意:兼容性好;缺点:必须知道元素的宽高,第三种:定位+transfrom

css垂直居中的几种实现方式

相比较水平居中,垂直居中比较复杂点。尤其是在实际页面中,有很多特殊的场景,导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式

设置 letter-spacing 后文字不能居中的解决方法

今天才发现,给文字设置 letter-spacing 再设置 text-align: center; ,文字会整体往左偏移,不能居中。 给文字嵌套了一个 span 标签,再选择文字可以看出,letter-spacing 给每个字的右边都加了一个间距。

小程序scroll-view点击项自动居中

我们想要的是居中的效果,所以触发滚动的条件是点scroll-view宽度一半之后的项才开始滚动,所以需要减去宽度的一半,offsetLeft为相对于scroll-view总长度的X轴距离,只要相减计算后的数值为正数,就可以证明上面的条件,触发滚动

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!