CSS：水平垂直居中以及一些小技巧汇总

一、水平垂直居中
　　水平垂直居中是老生常谈的话题，也是面试官比较喜欢问的问题。下面我对在实际中常常运用的几种方式做总结。HTML结构如下(这里我默认wrapper水平垂直居中)：

　　<div class="wrapper">
        <div class="goal"></div>
    　</div>

1.　有确定的宽高。一般常用在包含众多div的容器层(常称为wrapper，这里一般美工都会标注好宽高)。

　　.wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -100px;
            width: 200px;
            height: 200px;
            background-color: #ccc;
    } 
    .goal {
            position: relative;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;               
            width: 100px;
            height: 100px;
            background-color: deeppink;
     } 

这样就实现了goal水平垂直居中。
　　2.　可能更多地时候我们并不知道div的宽高，我们还需要实现水平垂直居中。那么我们可以这样做：

　　.wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -100px;
            width: 200px;
            height: 200px;
            background-color: #ccc;
    } 
    .goal {
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: deeppink;
　　　　　　  transform: translate(-50%, -50%);
     } 

而对于手机端来说我们更多的是采用flex布局的方式来实现水平垂直居中。代码如下：

　　.wrapper {
　　　　　　  display: -webkit-flex;
　　　　　　  display: flex;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -100px;
　　　　　　  -webkit-align-items: center;
　　　　　　  align-items: center;
　　　　　　  -webkit-justify-content: center;
　　　　　　  justify-content: center;
            width: 200px;
            height: 200px;
            background-color: #ccc;
    } 
    .goal {
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: deeppink;
　　　　　　  transform: translate(-50%, -50%);
     } 

也就是为.wrapper这个容器div设置水平/垂直(justify-content/align-items)的对齐方式，均设置为居中后容器中的.goal项目div自然水平垂直居中。(在flex布局中常把外层称为容器，内层div称为项目。)
　　3.　利用伪元素来实现，避免使用margin时在IE中的bug问题。

　　.wrapper {
            width: 200px;
            height: 200px;
　　　　　　  text-align: center;
            background-color: #ccc;
    } 
    .goal {
            display: inline-block;
            width: 100px;
            height: 100px;
            vertical-align: middle;
            background-color: deeppink;
     } 
　　 .wrapper:after {
            content: ' ';
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
            background-color: deeppink;
　　 }

该方法的重点在于利用伪元素给goal这个div提供vertical-align所需的对齐中心点。详情可以参考我的上一篇微研究：CSS：使用伪元素做水平垂直居中的微深入研究
二、常用技巧
　　1.　左边栏
　　　　　 左边栏的常用实现方式有很多，这里我们介绍几种常用方式：
　　a.　边框法：border-left: 5px solid blue;
　　b.　伪元素法：

　　　　　　　　　div:after {
            　　　　　content: ' ';
            　　　　　position: absolute;
            　　　　　top: 0;
            　　　　　left: 0;
            　　　　　width: 5px;
            　　　　　height: 60px;
            　　　　　background-color: blue;
　　　　　　　　　 }

c.　内/外/四周阴影法：

box-shadow:-5px 0px 0 0 blue;/box-shadow:inset 5px 0px 0 0 blue;/ box-shadow: 0 0 5px blue
(box-shaow 不占用元素的宽高哦)

2.　单行居中，俩行居左，超过俩行省略。
　　　 主要实现依靠：

display: -webkit-box; // 设置display，将对象作为弹性伸缩盒子模型显示
    　　　-webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数
   　　　 -webkit-box-orient: vertical; // 规定框的子元素应该被水平或垂直排列

具体实现可以参考这篇文章：单行居中，两行居左，超过两行省略
　　3.　堆叠问题
　　　　 有关CSS中float/inline-block/block/z-index的层叠水平（stacking level)问题。如下图：

CSS层叠水平表
　　4.　短小题目的快速水平垂直居中法
　　　　　　练手的项目中要实现一列菜单，菜单中的小标题需要水平垂直居中：
table布局实例图
　　对于这种情况常用table布局。如下：

　　.menu-item {
                display: table;
                width: 56px;
                height: 49px;
                padding: 0 12px;
                text-align: center;
                .text {
                    display: table-cell;
                    width: 56px;
                    vertical-align: middle;
                    .border_1px(rgba(7, 17, 27, .1));
                    font-size: 12px;
                }
            }

只需要在父元素.menu-item中添加display:table，在子元素(需要水平垂直居中的元素)中添加display:table-cell;vertical-align:middle即可。
　　小技巧遇到了研究透彻后会慢慢补充进来，欢迎讨论和拍砖~
参考文章：
　　CSS vertical-align 属性