了解实现css水平垂直居中的方法

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。

今天将以往使用过的方法做一个总结，包括水平居中，垂直居中及水平垂直居中方案。本文对一些类似方案进行归类总结，整理结果如下。后面如有新方案，还会陆续的补充进来。

DEMO

水平居中

1.margin：auto

块（block）元素水平居中，子元素 margin: auto。



    
        玉炉香，红蜡泪，偏照画堂秋思。眉翠薄，鬓云残，夜长衾枕寒。梧桐树，三更雨，不道离情正苦。一叶叶，一声声，空阶滴到明。

查看DEMO

2.text-align：center

行内（inline-block、inline）元素水平居中。父元素 text-align: center。


    
    
        
            曾以为真情会在你我的心间永驻，

            曾以为一辈子都要爱下去。

            但终究，时光也会老去，人心也会变淡，

            走着走着便忘了曾经，

            想着想着便走错了地方。

            有一天还是要面对分离，

            面对这情深缘浅的现实；

            有一天我们会分道杨镳，

            变成了最熟悉的陌生人。

查看DEMO

垂直居中

3.height + line-height

单行文字垂直居中，父元素height值 === line-height值。



    玉炉香，红蜡泪，偏照画堂秋思。

查看DEMO

4.幽灵元素

如果一个父元素中，有两个inline-block的子元素，且这两个子元素vertical-align: middle，那么这两个元素在垂直方向是居中的。

思路再扩展下，如果其中一个子元素的高度跟父元素一样，那么这两个子元素，在父元素都是垂直居中了。按此思路，元素垂直居中的实现：给父元素设置一个伪元素，display: inline-block; width: 0; height: 100%，且设置为在页面不可见，我们称这个伪元素为"幽灵元素"，通过给幽灵元素和子元素设置 vertical-align: middle 可以实现垂直居中。



    
        要走的终究是要走，想离开的最终还是会离开，没有那些敷衍的理由，留下的，只是那些没有保鲜期的诺言；一本往事录，合上的是谁的归宿，那曾经盛开的花，只不过是擦肩而过的幸福。

查看DEMO

注意：子元素宽度为100%时，右侧会有一丝空白。

水平垂直居中

5.table-cell布局

行内元素、单行、多行文字水平垂直居中。



    
        曾以为真情会在你我的心间永驻，曾以为一辈子都要爱下去。但终究，时光也会老去，人心也会变淡，走着走着便忘了曾经，想着想着便走错了地方。有一天还是要面对分离，面对这情深缘浅的现实；有一天我们会分道杨镳，变成了最熟悉的陌生人。

查看DEMO

6.flex布局

块元素、行内元素、单行、多行文字水平垂直居中。



    
        《童年．花草记忆》一念花开，一念花落。这山长水远的人世，终究是要自己走下去。人在旅途，要不断的自我救赎。(桂花)

查看DEMO

7.grid



    
        来者要惜，去者要放。人生是一场旅行，不是所有人都会去同一个地方。路途的邂逅，总是美丽，分手的驿站，总是凄凉。不管喜与愁，该走的还是要走，该来的终究会来。人生的旅程，大半是孤单。懂得珍惜，来的俱是美丽；舍得放手，走的不成负担。对过去，要放；对现在，要惜；对将来，要信

查看DEMO

8.position + 负margin

适用于固定大小的块级元素，margin-left、margin-top为元素宽、高的一半。

查看DEMO

9.position + calc()

适用于固定大小的块级元素，calc计算50% - 元素宽或高的一半。



    
        走得顺时，不必太张狂，就算你爬到了坡顶，终究还要走下坡路；

        走得快时，无须太得意，你的脚力总是有限的，不如放慢脚步把短暂的路走得精彩些；

        走得累时，莫要太哀叹，要知道歇一歇，经受了劳累，才知道坚强与珍惜；

        走得苦时，切勿太悲怆，生活里是没有绝路的，苦难是人生的梯，助你走出低谷和沼泽。

查看DEMO