@shenguotao 2017-01-06T18:21:59.000000Z 字数 8597 阅读 1691

CSS 居中

记录收集纯CSS层面实现的水平、垂直居中方法。

CSS水平垂直居中

1. 水平或垂直居中

1.1 textAlign

对于要求不高，并且内容是文本元素或是行内块元素(inline-block)，可以很容易的通过text-align:center进行水平居中。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            background:#eee;
            text-align: center;
        }
        span{
            display:inline-block;
            background:#aaa;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        使用text-align:center进行水平居中<br/>
        <span>inline-block</span>
    </div>
</body>
</html>

1.2 MARGIN

对于内容是块级元素,通过 margin:0px auto 可以很容易的进行水平居中。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            background:#eee;
            text-align: center;
        }
        p{
            background:#aaa;
            width:500px;
            line-height:100px;
            margin:0px auto;
        }
    </style>
</head>
<body>
    <div>
        <p>MARGIN:0PX AUTO</p>
    </div>
</body>
</html>

优点	缺点
简单直观	被水平居中的元素必须要有固定的宽度

1.3 lineHeight

对于内容是纯文本或者是行内快元素时，最简单的就是通过设置 line-height 实现垂直居中，不过这种方式有很大的不足之处，一是行高的值必须为当前父元素的高度，二是，只能一行，不能有多行。

优点	缺点
简单直观	只能作用于内联元素或行内块、只能一行不能多行、行高的值必须为父元素的高度

1.4 padding

如果父元素对于高度没有什么要求，可以通过设置 padding-top 与 padding-bottom 为相同值，来实现伪的垂直居中效果。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            padding:200px 0;
            background:#eee;
            text-align: center;
        }
        p{
            background:#aaa;
        }
    </style>
</head>
<body>
    <div>
        <p>PADDING</p>
    </div>
</body>
</html>

优点	缺点
非常简单	进行伪垂直居中的元素不能有高度

2. 水平与垂直同时居中

2.1 挡板方式实现的水平垂直居中

我称这种方式为挡板方式，是因为它在实现方式上很类似。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:600px;
            height:600px;
            background:#eee;
        }
        .top{
            height:50%;
        }
        .box1{
            width:200px;
            height:200px;
            background:#aaa;
            margin:0px auto;
            margin-top:-100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top"></div>
        <div class="box1"></div>
    </div>
</body>
</html>

优点	缺点
不需要定位	依然需要计算与设置负边距值要引入一个废标签

Note： 但在实际的使用上如果不考虑IE7-，那个无用的元素可以使用伪类替代。

2.2 vertical-align

vertial-align 是CSS的一个属性，该属性只对行内元素或行内快元素产生作用，主要用于设置当前元素与同级相邻元素的垂直对齐方式(基于基线)。常用于图片与文字的对齐。
这里则是利用 vertical-align 这种对齐的特性来在父元素中插入一个高度与其相同的子元素，最后再为该子元素设置 vertical-align 属性来对齐我们真正的内容。
这种方式还是蛮巧妙的，但是我认为其局限性在于只能作用于行内或行内快，另外要插入一个无关的废标签，不过该标签可以通过伪类进行代替。
最将 text-align:center 与 vertical-align:middle，结合使用，我们便可以将行内快元素水平垂直居中
示例：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <style>
         div{
             width:300px;
             height:200px;
             text-align:center;
             background:#eee;
             text-align:center;
         }
         div:after{
             content:'';
             display:inline-block;
             width: 1px;
             height:100%;
             vertical-align:middle;
         }
     </style>
 </head>
 <body>
     <div>
         <button>button1</button>
         <button>button2</button>
     </div>
 </body>
 </html>

2.3 模拟单元格特性

我们知道表格有很多特性，比如宽度的关联伸缩，再比如我们现在需要用到的垂直居中，而正好的是CSS也可以通过display属性为HTML元素赋予表格元素的特性。
常见的有：

display:table 声明一个表格
display:table-row 声明一个行
display:table-cell 声明一个单元格。

简单的使用示例（快速入门）：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .table{
                display:table;
                border:1px solid #ccc;
            }
            .row{
                display:table-row;
            }
            .cell{
                display:table-cell;
                border:1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div class="table">
            <div class="row">
                <div class="cell">ROW1-CELL1</div>
                <div class="cell">ROW1-CELL2</div>
            </div>      
            <div class="row">
                <div class="cell">ROW2-CELL1</div>
                <div class="cell">ROW2-CELL2</div>
            </div>
        </div>
    </body>
    </html>

因此利用这种手段，我们也可以实现需要的水平垂直居中效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            display:table-cell;
            width:500px;
            height:500px;
            background:#eee;
            vertical-align:middle;
            text-align: center;
        }
        p{
            display:inline-block;
            background:#aaa;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>
            TABLE-CELL-TEST<br/>
            TABLE-CELL-TEST<br/>
            TABLE-CELL-TEST<br/>
        </p>
    </div>
</body>
</html>

优点	缺点
垂直居中多行内容特别是文字内容	只有IE8+ 才支持只能垂直居中内联元素、行内块

通过模拟表格的方其优点在于可以垂直居中多行内容，但是缺点就是目前只有IE8+的版本才被支持。

2.4 position + margin:负值

通过定位可以实现水平垂直居中，不过对使用的条件要求较高，首先内容要进行绝对定位(absolute)，父元素要进行相对定位(relative)，其次内容要有固定的尺寸，最后调整margin负值与偏移属性的值。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            position:relative;
            height:600px;
            width:600px;
            background:#eee;
        }
        p{
            position:absolute;
            width:200px;
            height:200px;
            top:50%;
            left:50%;
            margin-left:-100px;
            margin-top:-100px;
            background:#aaa;
        }
    </style>
</head>
<body>
    <div>
        <p>MARGIN:0PX AUTO</p>
    </div>
</body>
</html>

优点	缺点
应用范围光兼容性好	进行居中的元素要有固定的尺寸要计算margin负边距值

2.5 position + margin:auto

对于绝对定位的元素来说,其默认效果是：

尺寸会自动收缩适应内容。
位置默认的是auto，
边距则默认值为0。

此时如果在默认尺寸的情况下，我们将其四个方向的偏移值都设置为0的话，元素会自动向四个方向拉伸100%贴合其参照元素。如果再设置固定宽度，并设置 margin:auto,那么便可以惊奇的发现，绝对定位的元素会水平垂直居中在父元素（参照元素）中。
如果你很好奇为什么为块级元素设置 margin:auto 不能垂直居中，你可以看这里[1]
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            position:relative;
            width:600px;
            height:600px;
            background:#aaa;
        }
        p{
            position:absolute;
            width:200px;
            height:200px;
            left:0;
            right:0;
            bottom:0;
            top:0;
            margin:auto;
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>This is Position Advace</p>
    </div>
</body>
</html>

优点	缺点
使用条件简单无需计算负边距值	进行居中的元素要有固定的尺寸只有IE8+支持

2.6 position + translate

通过CSS3的 translate 实现的水平垂直居中，其原理与position+margin负值的方式很类似。
但是相比于margin负值方式，其优点体现于：

不需要为内容设置固定的宽度。
不需要手动计算负边距值。

transform:translate(-50%,-50%) 可以自动向左与向上移动当前元素宽度的50%。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            position:relative;
            height:600px;
            width:600px;
            background:#eee;
        }
        p{
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            background:#aaa;
        }
    </style>
</head>
<body>
    <div>
        <p>transForm</p>
    </div>
</body>
</html>

优点	缺点
可以不需要为居中的盒子设置固定的尺寸手机端	只有IE9+支持

2.7 position + calc

calc() 是CSS3的函数属性，其功能是进行四则运算，参与运算的值可以是相对单位，也可以是绝对单位。
利用calc进行居中的原理其实就是通过为left:50%,top:50%,然后让50%再减去当前元素宽度或者高度的一半，其机制仍然属于负边距方式，但相比于position的负边距以及于translate等方式，它主要减少了样式的声明数量。
示例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            position:relative;
            width:600px;
            height:600px;
            background:#aaa;
        }
        p{
            position:absolute;
            width:200px;
            height:200px;
            left:calc(50% - 100px);
            top:calc(50% - 100px);
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>CSS3 - CALC</p>
    </div>
</body>
</html>

优点	缺点
减少样式声明手机端	需要为居中的元素设置固定尺寸只有IE9+、Chrome19+

2.8 相对于viewport进行水平垂直居中

CSS3中引入了新的度量单位，vh 与 vw，它们都是基于viewport的相对单位，即viewport的宽度与高度分别被分为100等份的vh 与 vw。
也就是说：
1vh = 1%(viewport的高度)
1vw = 1%(viewport的宽度)
那么为当前元素的尺寸设置为 50vh与50vw 即当前窗口的高度与宽度的一半，再结合 translate(50%,50%) 便可以将当前元素水平垂直居中在当前窗口中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            position:absolute;
            width:50vw;
            height:50vh;
            transform:translate(50%,50%);
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>CSS3 - CALC</p>
    </div>
</body>
</html>

优点	缺点
在基于窗口的环境下使用	只有IE9+ 、Chrome26+、Firefox19+、safair6.0+ 支持固定尺寸

2.9 FLEX

flex可谓是CSS3加入的强大布局特性，利用flex我们可以实现灵活方便且可塑的布局方案。
利用flex布局只需要简单的设置两行样式声明即可实现元素的水平与垂直居中。
justify-content:center 水平居中排列
align-items:center 垂直居中排列
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            display:flex;
            justify-content:center;
            align-items:center;
            text-align: center;
            background:#eee;
        }
        p{
            background:#aaa;
        }
    </style>
</head>
<body>
    <div>
        <p>FLEX</p>
    </div>
</body>
</html>

优点	缺点
移动端无需设置固定尺寸	兼容性低版本IE不支持

3 图片相关的水平垂直居中

专门用于图片水平垂直居中的CSS方法，并且以下方法都可以在所有浏览器中兼容。

3.1 背景图方式

这种方式最简单，就是将图片作为背景图，然后设置 background-position:center center 让其水平垂直居中在元素中。

3.2 CSS 表达式

这种方式要借助IE的私有扩展，并且这种方式的好处是可以兼容到IE5。
缺点也很明显，就是只能用于图片，因为这涉及到CSS表达式中的 this.height。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            display:table-cell; /* 在高版本浏览器中通过表格特性进行垂直居中图片 */
            width:500px;
            height:500px;
            vertical-align: middle;
            background:#eee;
        }
        .box img{
            display: block; 
            margin:0px auto;
            margin-top:expression((500 - this.height)/2); /* IE 浏览器的专有CSS 表达式属性 */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://nec.netease.com/img/s/1.jpg" alt="" />
    </div>
</body>
</html>

3.2 Button 方式

这种方式有些过滤奇技淫巧，但是好处就是可以兼容所有浏览器，但是在IE浏览器中会有稍微的瑕疵，也就是当单击的时候，图片会有轻微的晃动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        button{
            height:500px;
            width:500px;
            background:#eee;
            border:none;
            outline:none;
        }
    </style>
</head>
<body>
    <button>
        <img src="http://nec.netease.com/img/s/1.jpg" alt="" />
    </button>
</body>
</html>

3.4 网易nec - 适合图片的方式

这种网易NEC发明的方式，其优点在于只要图片的尺寸不超过父元素，图片都会在父元素中居中。
原理：

    首先为外层盒子进行相对定位，然后为内部盒子进行绝对定位，并且尺寸是由其内容（图片）撑开，再为内部盒子设置偏移值 left:50%;top:50%;最后再将其内部放入两个img标签，但引用的都是一张图片，其中一张图片进行占位隐藏用于让内部盒子识别尺寸，另一张图片则是用来显示，并且这张图片再进行绝对定位，然后left:-50%;top:-50%，这样便可以将图片水平、垂直居中在父元素中。

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box {
            position:relative;
            width: 600px;
            height: 600px;
            background:#eee;
        }
        .inner{
            position:absolute;
            left:50%;
            top:50%;
        }
        .inner .img1{
            visibility: hidden;
        }
        .inner .img2{
            position:absolute;
            left:-50%;
            top:-50%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
            <img class="img1" src="http://nec.netease.com/img/s/1.jpg" />
            <img class="img2" src="http://nec.netease.com/img/s/1.jpg" />
        </div>
    </div>
</body>
</html>

这种方式的优点还体现在兼容所有的浏览器上。

[1] 关于 margin:auto为什么能水平居中块级而不能垂直居中的问题。
auto是自动分配的意思，margin:auto,便是自动分配边距的意思。但是根据CSS2.1的规范，块级元素的宽度是参照其父元素的宽度（也就是为什么块级元素独占一行的原因），只有宽度是100%，auto才能够进行分配，然后让元素水平居中，但是问题来了，CSS规范同时也定义了块级元素的高度是根据内容适应，也就是说块级元素的高度是不可知的，所以为上下边距设置auto当然不能进行垂直居中。然而当我们给一个元素进行定位，使其成为块级元素并脱离文档流时，又同时为其设置top:0;right:0;bottom:0;left:0，便会将该元素的尺寸完全贴合其父元素或参照元素，即width:100%,height:100%,那么此时再设置margin:auto,便可以进行水平/垂直居中。 ↩