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;
　　 }

　　　　　　　　　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; // 规定框的子元素应该被水平或垂直排列

　　.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;
                }
            }