垂直居中相关知识总结

Posted 2020-07-02

方法总结

一、绝对定位之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时，内容超过元素高度时会溢出，没有滚动条；

二、绝对定位之负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)；

三、额外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；

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

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

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

优缺点分析

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

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

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

优缺点分析

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

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

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

八、Flex居中

说明：

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

• Flex 布局教程：语法篇；

• Flex 布局教程：实例篇；

总结

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

form https://segmentfault.com/a/1190000004394432