常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中，比较简单，能够设置text-align center，或者设置 margin-left:auto; margin-right:auto 之类的便可。

主要麻烦的地方仍是在垂直居中的处理上，因此接下来主要考虑垂直方向上的居中实现。

水平垂直居中主要包括三类：基本文本类，图像类，其余元素类

但，也是由一些方法能够实现的，下面就来谈谈了解到的10中方法。

 

方法1、使用 line-height

这种方式更多地用在 单行文字的状况,其中使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        margin: 20px auto;
        width: 200px;
        height: 200px;
        
        background: #ddf;
    }
    .content { 
        line-height: 200px;
        text-align: center;
　　     overflow: hidden;
    }
</style>

<div class="box">
    <div class="content">
        This is text
    </div>
</div>

单行文字的状况各浏览器都能兼容，多行文字就须要考虑其余方法了。

但若是是图片，IE6以上能够正常居中，如下（包括IE6）则不兼容。

（若是想经过行高让图片在块元素内垂直居中，ie6无效果，由于ie6中含有替换元素的行高会失效。）

 

2、使用 vertical-align

加上这个属性，不过line-height也不能丢

若是不加上那个line-height的属性的话，div会认为你vertical-align的是默认高度，而不是自定义设置的高度。

.box { 
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        line-height: 200px;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
    }

跟上述同样，IE6的图片仍是有问题

 

3、把容器看成表格单元

table能够设置vertical-align，天然能实现居中，因此咱们能够模拟出一个table

使用display:table和display:table-cell的方法，前者必须设置在父元素上，后者必须设置在子元素上，所以咱们要为须要定位的文本再增长一个<div>元素：

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        margin: 20px auto;
        display: table;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    
</style>

    <div class="box">
        <div class="content">
            This is test a b c d e f g h i j k a b c d e f g h i j k
        </div>
    </div>    

多行文本能居中了，但IE6却仍是老样子。图片的居中也同理。

  

4、IE6下的解决方案

IE6这么霸道..不过仍是能够 以bug攻bug

在Internet Explorer 6及如下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，若是再对子元素

进行百分比计算时，计算的基础彷佛是有继承性的（若是定位的数值是绝对数值没有这个问题，可是使用百分比计算的基础将再也不是该元素的

高度，而从父元素继承来的定位高度）

好比这

<div id="wrap">  
 <div id="subwrap">  
   <div id="content">  
 </div>  
</div>
</div>
     

若是咱们对subwrap进行了绝对定位/相对定位，那么content也会继承了这个这个属性，虽然它不会在页面中立刻显示出来，可是若是再对content进

行相对定位的时候，你使用的100%分比将再也不是content原有的高度。

例如，咱们设定了subwrap的position为top:40%，咱们若是想使content的上边缘和wrap重合的话就必须设置top:-80%;

那么，若是咱们设定subwrap的top:50%的话，咱们必须使用-100%才能使content回到原来的位置上去，可是若是咱们把content设置成-50%呢？

那么它就正好垂直居中了。因此咱们可使用这中方法来实现Internet Explorer 6中的垂直居中：

注意，要有三个层级才能够~ 喜欢hack的话就直接兼容进去了

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        position: relative;
        margin: 20px auto;
        display: table;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        _position: relative;
        _top:50%;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .content > div { 
        _position: relative;
        _top: -50%;
    }
</style>
    <div class="box">
        <div class="content">
            <div>This is test a b c d e f g h i j k a b c d e f g h i j k</div>
        </div>
    </div>

 

5、负边距margin的使用

这个方法主要用于块的居中，首先绝对定位到50% ，而后经过负边距拉回来（元素高的一半，宽的一半）

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        position: relative;
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        position: absolute;
        top:50%;
        left: 50%;
        margin-left: -60px; /* (width + padding)/2 */
        margin-top: -50px; /* (height + padding)/2 */
        padding: 10px;
        width: 100px;
        height: 80px;
        background: #abc;
    }
</style>

    <div class="box">
        <div class="content">
            This is test 
        </div>
    </div>    

 

6、css3中transform的使用

其实这种方式给负边距差很少，原理也是拉回来，不过由于css3的关系，IE8如下（包括IE8）还不支持

使用 transform: translate(-50%,-50%)拉回来

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        position: relative;
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        position: absolute;
        top:50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        padding: 10px;
        width: 100px;
        height: 80px;
        background: #abc;
    }
</style>

 

7、直接使用margin:auto

使用这个方式须要有一些知识 要了解

绝对定位元素不在普通内容流中渲染，所以margin:auto可使内容在经过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

优势：

1.支持跨浏览器，包括IE8-IE10.

2.无需其余特殊标记，CSS代码量少

3.支持百分比%属性值和min-/max-属性

4.只用这一个类可实现任何内容块居中

5.不管是否设置padding均可居中（在不使用box-sizing属性的前提下）

6.内容块能够被重绘。

7.完美支持图片居中。

缺点：

1.必须声明高度（查看可变高度Variable Height）。

2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。

3.在Windows Phone设备上不起做用。

浏览器兼容性：

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试经过。

对比表格：

绝对居中法并非惟一的实现方法，实现垂直居中还有些其余的方法，并各有各的优点。采用哪一种技术取决于你的浏览器是否支持和你使用的语言标记。这个对照表有助于你根据本身的需求作出正确的选择。
 

解释：

绝对居中（AbsoluteCentering）的工做机理能够阐述以下：

一、在普通内容流（normal content flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。
W3C中写道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

2、position:absolute使绝对定位块跳出了内容流，内容流中的其他部分渲染时绝对定位部分不进行渲染。

Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space

三、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器从新分配一个边界框，此时该块block将填充其父元素的全部可用空间，父元素通常为body或者声明为position:relative;的容器。

Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).

四、  给内容块设置一个高度height或宽度width，可以防止内容块占据全部的可用空间，促使浏览器根据新的边界框从新计算margin:auto

Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.

五、因为内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。
W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

这么看来， margin:auto彷佛生来就是为绝对居中(Absolute Centering)设计的，因此绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。

简而言之（TL;DR）：绝对定位元素不在普通内容流中渲染，所以margin:auto可使内容在经过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中

View Code

这样一来，就能够直接居中了，不过IE6仍是不能兼容到

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        position: relative;
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100px;
        height: 80px;
        background: #abc;
    }
</style>
    <div class="box">
        <div class="content">
            This is test 
        </div>
    </div>

8、上下padding相等的模拟

通常用于 父元素高度不肯定的文本、图片等的垂直居中 

    .content { 
        padding-top: 25px;
        padding-bottom: 25px;
        background: #abc;
        text-align: center;
    }

　　<div class="content">
　　　　<p>This is test a b c d e f g h i j k a b c d e f g h i j k </p>
　　</div>

不过块级元素就有点问题了，第二行开始就不会左右居中了

   

 

9、使用css3的Flex布局

Flex布局用法见 上文      flex对IE而言 IE10+ 才支持

好比我想让box中那几个div都水平垂直居中，只要简单设置一下便可。

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        margin: 20px auto;
        padding: 10px;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        justify-content: center;
        /* align-content: flex-start; */
        align-items: center;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        width: 50px;
        height: 50px;
        border: 2px solid #adf;
        background: #abc;
    }

</style>

    <div class="box">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>

获得结果为左图，由于默认align-content是stretch已经彻底撑开了，若是想获得右图链接在一块儿就 把上头的 注释取消便可

  

10、在 content 元素外插入一个 div

并设置此 div height:50%; margin-bottom: -(contentheight + padding)/2;。

好比content高度为100px,总padding为20px  ，则margin-bottom: -60px 将content挤下去

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .floater { 
        height: 50%;
        margin-bottom: -60px;
     }
    .content { 
        position: relative;
        margin: 0 auto;
        padding: 10px;
        width: 100px;
        height: 100px;
        border: 2px solid #adf;
        background: #abc;
    }

</style>

    <div class="box">
        <div class="floater"></div>
        <div class="content"></div>
    </div>

缺点就是增长了无心义的标签，但优势是简便并且IE6也获得兼容

 

固然，还有不少方法能够实现水平垂直居中，见到了再添加吧。