资讯专栏INFORMATION COLUMN

垂直居中相关知识总结

Labradors / 1067人阅读

摘要:垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前,在上提问了个问题关于垂直居中,大家有没有什么比较好的建议。

垂直居中相关知识总结 前言

工作中用到了很多关于垂直居中相关的知识之前,在SF上提问了个问题CSS关于垂直居中,大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助,前辈们给的答案都非常多也各式各样,我觉得有必要把大家的回答总结一下。

方法总结 一、绝对定位之automargin 先来看一下绝对定位的概念:

position : absolute;

将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在最上面,可以有负值。

说明:

使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现

样式:

HTML结构

我是绝对定位
我在垂直居中
欧耶

CSS样式

.absolute-center {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #f0f0f0;
    /*IE不支持resize*/
    resize: both;
    overflow: auto;
}

页面呈现样式

优缺点分析

优点:支持响应式,只有这种方法在resize后仍然居中;

缺点:没有显式设置overflow时,内容超过元素高度时会溢出,没有滚动条;

二、绝对定位之负margin 说明:

已知元素高度后,使用绝对定位将top设置为50%,mergin-top设置为内容高度的一半(height + padding) / 2;内容超过元素高度时需要设置overflow决定滚动条的出现;top:50%元素上边界位于包含框中点,设置负外边界使得元素垂直中心与包含框中心重合;

样式:

CSS样式

.absolute-center {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -50px;
    background: #f0f0f0;
}

页面呈现样式

优缺点分析

优点:代码量少、适用于所有浏览器、不需要嵌套标签;

缺点:不支持响应式(不能使用百分比、min/max-width);

三、额外div 说明:

在需要居中的元素外插入一个div,设置外div的height为50%,margin-bottom为内部元素的一半(height+padding)/2。内容超过元素高度时需要设置overflow决定滚动条的出现。

样式:

HTML结构

我是绝对定位
我在垂直居中
欧耶

CSS样式

.outer {
    height: 50%;
    margin-bottom: -50px;
}
.inner {
    margin: auto;
    height: 100px;
    width: 100px;
    background-color: #f0f0f0;
}

页面呈现样式

优缺点分析

优点:浏览器兼容性好,支持旧版本ie;

缺点:需要额外元素、不支持响应式;

四、table布局 说明:

关于display:table-cell应用,张鑫旭前辈写过一篇博文我所知道的几种display:table-cell的应用;我就不详细讲述。

display:table此元素会作为块级表格来显示 类似

table标签

,表格前后带有换行符。

display:table-cell 此元素会作为一个表格单元格显示 类似

td 和 th标签

原理:

利用表布局特点,vertical-align设置为Middle后,单元格中内容中间与所在行中间对齐。

样式:

1.HTML

我是绝对定位
我在垂直居中
欧耶

2.CSS样式

.container{
    display: table;
    height: 200px;
    width: 100px;
    background: #f0f0f0;
}
.absolute-center{
    /*将cell垂直居中,如果外层div不为table则tablecell必须有高度*/
    display: table-cell;
    vertical-align: middle;
}

3.页面呈现

优缺点分析

优点:支持任意内容的可变高度、支持响应式;

缺点:每一个需要垂直居中的元素都会需要加上额外标签(需要table、table-cell两个额外元素);

五、line-height方式 说明:

该方式只适用于情况比较简单的单行文本,只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这种方法在小元素上非常有用,例如使按钮文本或者单行文本居中。

原理:

如果line-height高度大于font-size,生于高度浏览器会平分到文字上下两端。

样式:

1.HTML

    
我是line-height

2.CSS样式

        .container {
            width: 200px;
            height: 100px;
            line-height: 100px;
            background-color:#f0f0f0;
        }

3.页面呈现

优缺点分析

优点:适用于所有浏览器 无足够空间时不会被截断;

缺点:只对文本有效(块级元素无效) 多行时,断词比较糟糕;

六、inline-block方式 说明:

将center元素display设置为inline-block,vertical-align设置为middle,为包含框设置after伪元素,将伪元素display设置为inline-block,vercial-align设置为middle,同时设置height为100%,撑开容器。

原理:

为同一行的inline-block元素设置vertical-align:middle,该行内的inline-block元素会按照元素的垂直中心线对齐。

样式:

1.HTML

    
我是inline-block
我在垂直居中
欧耶

2.CSS样式

        .outer {
            display: block;
        }       
        .outer:after {
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }    
        .inner {
            background-color: #f0f0f0;
            display: inline-block;
            vertical-align: middle;
        }

3.页面呈现

优缺点分析

优点:支持响应式、支持可变高度;

缺点:会加上额外标记;

七、JS编写居中 说明:

与CSS方法的绝对定位相似,不过具体的定位方式是在js中写出,便于维护。

样式:

HTML结构

    
我是js居中
我在垂直居中
欧耶

CSS样式

        #box-out {
            width: 200px;
            height: 200px;
        }
        #box {
            position: absolute;
            background-color: #f0f0f0;
            width: 100px;
            height: 100px;
        }

3.javascript

    

4.页面呈现

八、Flex居中 说明:

真正的垂直居中布局,全都是优点,缺点就是IE支持不佳...我觉得有些时候该放弃就可以放弃ie了 :)。Flex阮一峰老师讲的非常非常非常详细,我就不多做介绍了,贴上阮一峰老师的博客

Flex 布局教程:语法篇;

Flex 布局教程:实例篇;

总结

首先非常感谢回复我问题的各位前辈。
目前寻找了这么八种常用的方法,基本囊括了所有的垂直居中的方法。

提别感谢

糖伴西红柿的博文;
木的树的博文;
阮一峰老师的博客;
张鑫旭老师的博客;
等等。

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

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

相关文章

  • 垂直居中相关知识总结

    垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关知识之前,在SF上提问了个问题CSS关于垂直居中,大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助,前辈们给的答案都非常多也各式各样,我觉...

    GeekGhc 评论0 收藏0
  • 前端-CSS3&H5

    ...于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望...

    Hydrogen 评论0 收藏0
  • 前端-CSS3&H5

    ...于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望...

    xiaolinbang 评论0 收藏0
  • margin相关基本知识

    ...ttom和 margin-right 相对于自身进行偏移 常见的问题 垂直外边距合并 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 合并几种...

    godiscoder 评论0 收藏0
  • 总结的一些JavaScript的冷知识

    ...马就把浏览器变成notepad了,厉害吧! data:text/html, 13、垂直居中 大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了,但是垂直居中却没有相应的css属性来设置,而如果要设置元素能够垂直居中必须得将容...

    lingdududu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<