资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/垂直居中相关知识总结

垂直居中相关知识总结

Labradors / 1235人阅读

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

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

工作中用到了很多关于垂直居中相关的知识之前，在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 布局教程：实例篇；

总结

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

提别感谢

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

云服务器 idc机房托管 垂直居中 实现垂直居中 水平垂直居中 文字垂直居中

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

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

相关文章

  • 垂直居中相关知识总结

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

    GeekGhc 评论0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

    Hydrogen 评论0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

    xiaolinbang 评论0 收藏0

  • margin相关基本知识

    摘要：也能用于内联元素这是规范所允许的的和属性对非替换内联元素无效例如和。解决方法把左侧块级元素更改为内联元素，比如把更换为。 什么是 margin ? CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。空白区通常是指其他元素不能出现且父元素背景可见的区...

    godiscoder 评论0 收藏0

  • 总结的一些JavaScript的冷知识

    摘要：例如要删除数组的第个元素，可以使用这样的语句不过对于大型数组来说，这个函数的效率可能不高。可选参数可以限制被分割的片段数量。看代码吧下面的代码利用的来实现垂直居中和水平居中转自快乐人生，积极进取总结的一些的冷知识 1、!!将一个值方便快速转化为布尔值 console.log( !!window===true ); 2、不声明第三个变量实现交换 var a=1,b=2; a=[b...

    lingdududu 评论0 收藏0

发表评论

登陆后可评论

0条评论

Labradors

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<