完美实现文字图片水平垂直居中

张宪坤发布于2019-08-28 18:27 / 2511人阅读

摘要：想居中就居中，爽啊很完美有木有如果能支持的话，又是该死的文章转自换行文字图片水平垂直居中完美解决方案

垂直居中是一个历史悠久的大问题，要做到兼容所有浏览器少不了要花点时间，网上也流传了很多解决方案，但没发现比我现在用的方案更完美，至少在我的项目是如此。

项目中要用到垂直居中而碰到兼容性问题的，一般都是以下几种情况：

换行文字垂直居中

图片垂直居中

以上都是在固定宽高的容器里垂直居中，不然的话margin，padding便可实现。

解决垂直居中无非就从几个方面入手

利用行高等于容器高度

模拟表格单元格特性

定位布局

css3的display:box

换行文字垂直居中 结合表格单元格特性和定位来实现

/* 换行文字垂直居中 */
.vc-font1 {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/* 兼容IE6、7 */
*+html .vc-font1 {
    height: auto;
    min-height: 200px;
}

.vc-font1 .vc-fix {
    *position: relative;
    *top: 50%;
    *left: 50%;
    *width: 100%;
}

.vc-font1 .vc-inner {
    *position: relative;
    *top: -50%;
    *left: -50%;
}


    换行文字垂直居中，兼容所有浏览器

当文字高度超出容器时，识别table-cell的浏览器容器会自适应，此时容器的height属性相当于min-height，为了达到所有浏览器效果一致，容器的height还要Hack一下。

缺点：增加了多余的标签

利用行内块vertical-align:middle来实现

.vc-font2 {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    text-align: center;
    overflow: hidden;
}

.vc-font2 .vc-inner {
    display: inline-block;
    vertical-align: middle;
}

.vc-font2 .vc-fix {
    display: inline-block;
    width: 0;
    height: 100%;
    line-height: 100%;
    vertical-align: middle;
    visibility: hidden;
}


    换行文字垂直居中，兼容所有浏览器

vc-inner和vc-fix必须是行内元素，vc-inner加上vc-fix的宽度不能超过容器宽度，行内块换行时会多出空隙(容器font-size: 0可去除，但这里不适用)，所以这两个标签不能换行。

缺点：增加了多余的标签(硬伤)，标签不能换行且必须是行内元素。

固定宽高图片垂直居中

前面提到的换行文字垂直居中的方法对于固定宽高图片垂直居中也是适用的

利用定位(原理跟方法1类似)

.vc-img1 {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    position: relative;
}

.vc-img1 img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}

既然已经确定了图片的宽高，毫无疑问使用这种方法就没有兼容性的问题出现了

缺点：图片宽高必须固定，以便计算图片margin的负值。

行高等于容器高度

.vc-img2 {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    line-height: 200px;
    _font-size: 200px;
    text-align: center;
}

.vc-img2 img {
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

/*hack for ie7 字体要设置多大，自个慢慢调整*/
*+html .vc-img2 {
    font-size: 180px;
}

我以为设置了行高等于容器高度就完事了，依然还是碰到了问题，IE6不买账没效果，IE7也闹别扭，在标签同一行情况下失效。

这里顺便推荐一个很好用的占位图网站，好奇的童鞋猛戳链接吧：）

缺点：感觉这样写不爽

图片自适应容器宽高垂直居中

这个方法很简单，就是在方法4的基础上改一下图片的宽高改成max-width,max-height，代码如下：

.vc-img3 {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}

.vc-img3 img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

/*hack for ie7 字体要设置多大，自个慢慢调整*/
*+html .vc-img3 {
    font-size: 180px;
}

很明显这是不兼容IE6，要兼容IE6恐怕就要写JS。对此，我只想说，让IE6见鬼去吧！

CSS3的display:box

最后给出一种高端大气上档次的方法。

.vc-css3 {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;
    display: -o-box;
    -o-box-align: center;
    -o-box-pack: center;
    display: -ms-box;
    -ms-box-align: center;
    -ms-box-pack: center;
    display: box;
    box-align: center;
    box-pack: center;
}

.vc-css3 img {
    width: 100px;
    height: 100px;
}


    
    
想居中就居中，爽啊！

很完美有木有？如果IE能支持的话，又是该死的IE...

文章转自《换行文字、图片水平垂直居中完美解决方案》

服务器托管混合云水平垂直居中文字垂直居中 html使文字垂直居中实现垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111238.html

CSS水平或垂直居中技巧

摘要：适用情景单对象水平居中原理将子元素设置块级表格，再设置水平居中。结语有些是水平居中，有些是垂直居中，将它们某两个合在一起就能实现水平和垂直均居中。前言 css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（ps：特想找个地洞钻进去）。。。时隔两年，对于这个...

CastlePeaK 2019-08-30 11:22 评论0 收藏0
【第1期】聊聊css居中那点事

摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。我们主要从这几个方面来了解下居中：水平居中垂直居中水平垂直居中水平...

刘永祥 2019-08-30 15:55 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
绝对定位(Absolute positioning)

摘要：绝对定位的特性包裹性包裹性展示跟一样也具有包裹性两者的包裹性都类似于使元素化破坏性破坏性展示相对于引起父元素塌陷要更进一步上面的例子就可以看出元素完全脱离文档流并且被其它盒子以及盒子内的文本无视替代方案由于滥用会降低扩展性和维护性所以需要绝对定位的特性包裹性 absolute包裹性展示跟float一样,absolute也具有包裹性,两者的包裹性都类似于使元素inline-bloc...

gaomysion 2019-08-29 12:36 评论0 收藏0