垂直居中相关知识总结

垂直居中相关知识总结

---

前言

工做中用到了不少关于垂直居中相关的知识以前，在SF上提问了个问题CSS关于垂直居中，你们有没有什么比较好的建议。很是感谢各位前辈对个人帮助，前辈们给的答案都很是多也各式各样，我以为有必要把你们的回答总结一下。

方法总结

1、绝对定位之automargin

先来看一下绝对定位的概念：

position : absolute;

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

说明：

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

样式：

1. HTML结构

<div class="container">
     <div class="absolute-center">
         我是绝对定位<br/>
          我在垂直居中
         <br/> 欧耶
         <br/>
     </div>
 </div>

1. 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;
}

1. 页面呈现样式

优缺点分析

• 优势：支持响应式，只有这种方法在resize后仍然居中；

• 缺点：没有显式设置overflow时，内容超过元素高度时会溢出，没有滚动条；

2、绝对定位之负margin

说明：

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

样式：

1. CSS样式

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

1. 页面呈现样式

优缺点分析

• 优势：代码量少、适用于全部浏览器、不须要嵌套标签；

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

3、额外div

说明：

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

样式：

1. HTML结构

<div class="container">
    <div class="outer"></div>
    <div class="inner">
        我是绝对定位
        <br/> 我在垂直居中
        <br/> 欧耶
        <br/>
    </div>
</div>

1. CSS样式

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

1. 页面呈现样式

优缺点分析

• 优势：浏览器兼容性好，支持旧版本ie；

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

4、table布局

说明：

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

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

table标签

，表格先后带有换行符。

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

td 和 th标签

原理：

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

样式：

1.HTML

<div class="container">
     <div class="absolute-center">
         我是绝对定位<br/>
          我在垂直居中
         <br/> 欧耶
         <br/>
     </div>
 </div>

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两个额外元素）；

5、line-height方式

说明：

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

原理：

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

样式：

1.HTML

<div class="container">
        我是line-height
    </div>

2.CSS样式

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

3.页面呈现

优缺点分析

• 优势：适用于全部浏览器 无足够空间时不会被截断；

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

6、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

<div class="outer">
        <div class="inner">
            我是inline-block
            <br/> 我在垂直居中
            <br/> 欧耶
            <br/>
        </div>
    </div>

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

优缺点分析

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

• 缺点：会加上额外标记；

7、JS编写居中

说明：

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

样式：

1. HTML结构

<div id="box-out">
        <div id="box">
            我是js居中
            <br/> 我在垂直居中
            <br/> 欧耶
            <br/>
        </div>
    </div>

1. CSS样式

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

3.javascript

<script type="text/javascript">
        function boxGao() {
            var box = document.getElementById('box');
            var outBox = document.getElementById('box-out');
            var gao = box.offsetHeight;
            var outGao = outBox.offsetHeight;
            box.style.top = (outGao - gao) / 2 + 'px';
        }
        boxGao();
    </script>

4.页面呈现

8、Flex居中

说明：

真正的垂直居中布局，全都是优势，缺点就是IE支持不佳...我以为有些时候该放弃就能够放弃ie了 ：）。Flex阮一峰老师讲的很是很是很是详细，我就很少作介绍了，贴上阮一峰老师的博客

• Flex 布局教程：语法篇；

• Flex 布局教程：实例篇；

总结

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

提别感谢

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