CSS居中那些事

作前端这一年多来，其实一直都是偏向于js先后端，css什么的老是抱着够用就好的心态，历来没有系统的学习或总结过，结果如今的水平也一直停留在够用的阶段。感受做为一名合格的前端工程师，不能让css成为本身的短板，因而简单的总结一下，高手绕路。

水平居中

咱们在实际工做中常会遇到须要设置水平居中的场景，好比为了美观，文章的标题通常都是水平居中显示的。
这里咱们又得分两种状况：行内元素 仍是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。

行内元素

若是被设置元素为文本、图片等行内元素时，水平居中是经过给父元素设置 text-align:center 来实现的。

块状元素

当被设置元素为 块状元素 时用text-align：center就不起做用了，这时也分两种状况：定宽块状元素和不定宽块状元素。

定宽块状元素

知足定宽和块状两个条件的元素是能够经过设置“左右margin”值为“auto”来实现居中的。如：

div{
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

不定宽块状元素

在实际工做中咱们会遇到须要为“不定宽度的块状元素”设置居中，好比网页上的分页导航，由于分页的数量是不肯定的，因此咱们不能经过设置宽度来限制它的弹性。

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都不少）：

1. 加入table标签包裹或使用disable:table-cell

为何选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），所以能够看作一个定宽度块元素，而后再利用定宽度块状居中的margin的方法，使其水平居中。

2. 设置display: inline方法

改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），而后使用 text-align:center 来实现居中效果。

与第一种相似，显示类型设为行内元素，进行不定宽元素的属性设置。

3. 使用left:50%配合transform: translateX(-50%)

这个就好说啦，子元素相对父元素向右偏移父元素的50%，而后在相对于自身向左偏移自身的50%,完事。

垂直居中

咱们在实际工做中也会遇到须要设置垂直居中的场景，好比好多报纸的文章标题在左右一侧时，经常会设置为垂直居中，为了用户体验性好。

这里咱们又得分两种状况：父元素高度肯定的单行文本，以及父元素高度肯定的多行文本。

父元素高度肯定的单行文本

父元素高度肯定的单行文本的竖直居中的方法是经过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

父元素高度肯定的多行文本

1. 利用display: table-cell和vertical-align: middle

在 chrome、firefox 及 IE8 以上的浏览器下能够设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE六、7 并不支持这个样式,