居中那件不大不小的事

2017-02-07

元素及元素内容的水平/垂直完全居中常被作为考察前端工程师的基本技能，而这项技能目前也是再项目中较为常见的实际应用之一。

水平居中

水平居中的实现相对简单，主要分为html中块级元素和内联元素的居中。

定宽块级元素
首先有个div
1
<div class="center"></div>

div的居中，只需要设置左右margin为auto即可

.center{
    width:200px
    margin: 50px auto;
}

不定宽块级元素
由于宽度不定，比如再响应式布局中，如果限制了margin，可能会导致不必要的误差。此时，可将通过3种方法进行居中设置（table/inline/position）
还是上述div,再不设置width:200px的情况下，可进行如下3种操作

/**
利用table标签的长度自适应性，再对其进行定宽块级元素(ul/li)的margin操作
*/
<div class="center">
    <table>
        <tbody>
        <tr>
            <td>
                <ul>
                    <li>小橘子</li>
                    <li>小橘子</li>
                </ul>
            </td>
        </tr>
        </tbody>
    </table>
</div>
table{
    marigin:0 auto;
}
/**
    更改display为inline，将父级设置为text-align:center
*/
<div class="center">
    <ul>
        <li>小橘子</li>
        <li>小橘子</li>
    </ul>
</div>
.center{
    text-aling:center;
}
ul{
    display:inline;
}
/**
    通过position，父级左浮动后，左偏移50%，同时子元素则左偏移-50%。其实此方法也可为定宽元素设置居中，将子元素绝对定位，左偏移-50%，有移动宽度的一半即可。
*/
.center{
    positon:relative;
    float:left;
    left:50%;
}
ul{
   position:relative;
   left:-50%;
}

内联元素
可以再其父级添加text-align:center；

<div class="center">
        <span>小橘子小橘子小橘子</span>
</div>
.center{
    ......
     text-align: center;
}

垂直居中

垂直居中相对水平居中确是有点棘手，普通的当行元素，你可以通过上下padding值一样来设置居中，但这方法有挺多情况不能用，因此不推荐

单行内联元素
子元素为单行不换行，且父元素高度确定，可以将父元素height和line-height设置为相等

<div class="center">
    <ul>
        <li>小橘子</li>
    </ul>
</div>
.center {
    width: 400px;
    height: 400px;
    line-height: 400px;
    text-align: center;
}

2.多行内联元素
第一个方法是跟不定宽块级元素table方法居中使用相同，套table->tbody->tr->td，然后引入垂直居中vertical-align：middle,这里不作演示。
另外一个是使用table-cell显示，但此方法再ie6~8不兼容

.center {
    width: 400px;
    height: 400px;
    display: table-cell;
    vertical-align: middle;/*使用table-cell以激活table-cell*/
}

块级元素垂直居中

/**
元素高度已知的情况下
*/
.center {
    width: 400px;
    height: 400px;
    position:relative;
    border: 2px solid;
}
ul{
    height: 200px;
    width: 200px;
    position: absolute;
    top:50%;
    margin-top:-100px;/*即下降高度的一半*/
}
/**
高度未知的情况下，可以使用CSS3的transform属性
*/
ul{
    。。。。省略
    transform:translateY(-50%);
}

同时水平和垂直居中

元素存在宽度和高度，说明他已经是个块级或者伪块级了，可以使用position方法，关键代码：

.center{
    positon:relative;
}
ul{
    width:200px;
    height:200px;
    positon:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
}

元素宽度和高度未知的情况下，引用transform也可进行水平和垂直同时居中

1 2	......省略 transfrom:translate(-50%,-50%);

特殊的flex布局

使用CSS3种的flex布局，进行这些居中就方便和快捷多了。目前还不能很好的兼容再所有浏览器中，引入f；flex布局需要声明浏览器，比如display:-webkit-flex，但此是趋势。flex布局较为复杂，仅介绍与居中有关的几个属性。

justify-content:内容相对于主轴的对齐方式，值包括了start(相对主轴开始对齐)/end(相对主轴结束对齐)/center(主轴中对齐，主轴为横轴则为居中，主轴为纵轴，则为垂直对齐)/space-between(两端对其)/space-around(间隔相等对齐)
align-item：相对交叉轴的对齐方式，值包括了flex-start(交叉轴的起点对齐)/flex-end（交叉轴的终点对齐）/flex-center(交叉轴的中点对齐)/stretch（默认，占满）/baseline（第一行文字基线对齐）