垂直居中相关知识总结

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

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

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时，内容超过元素高度时会溢出，没有滚动条；

已知元素高度后，使用绝对定位将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的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；

缺点：需要额外元素、不支持响应式；

关于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 设置为那个对象的 height 值就可以使文本居中了。这种方法在小元素上非常有用，例如使按钮文本或者单行文本居中。

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

1.HTML

    

        我是line-height
    

2.CSS样式

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

3.页面呈现

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

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

将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.页面呈现

优点：支持响应式、支持可变高度；

缺点：会加上额外标记；

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

HTML结构

    

        

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

        
    

CSS样式

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

3.javascript

4.页面呈现

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

Flex 布局教程：语法篇；

Flex 布局教程：实例篇；

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

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