horizontal center and vertical middle in CSS

写在前面的话：
1: 为了方便起见，接下来我都会把想要居中的元素，不管是一行text，还是一个div，都叫做‘目标元素’， 把包含这个目标元素的叫做‘父元素’。（额。。。。这两个名字如此不对称，我也是醉了。）

2: 我会给一个元素设置一个同名的class和id，class用了写一些实际上跟居中没有关系的css，只是为了好看；id呢用来写跟居中有关的css，免得混淆了。

Case 1: 最简单的单行的行内元素（inline element）
HTML Code:

<div id='child' class='child'>
     <span>aaaaa</span>
 </div>

CSS Code:

.child {
    height: 100px;
    width: 100px;
    background-color: #F7F00E;
}

#child {
    line-height: 100px;
    text-align: center;
}

垂直居中：只需要给父元素（＃child）设置‘等值’的height和line-height.
水平居中：当然就是text-align: center 就行了

Case 2: 一个div在另一个div里面居中
HTML code:

<div id='child' class='child'>
     <div>Apple</div>
 </div>

CSS code:

#child {
    line-height: 100px;
    text-align: center;
}

case 2和case 1一样，对于垂直居中来说，只需要设置等值的line-height和height就可以了。达到的效果是：
------->

Case 3: 多个div元素在父div元素中垂直水平居中
HTML code:

<div id='child' class='child'>
     <div>Apple</div>
     <div>Orange</div>
 </div>

CSS code:

#child {
    line-height: 100px;
    text-align: center;
}

这时候，我们往＃child里面添加了一个div元素，如果我们保持我们之前的＃child的css代码不变，这时候呈现的效果是：

因为我们给父元素＃child设置了100px的line-height,而line-height是可以继承的，所以它里面的每一个div元素都通过继承拥有了100px的line-height。这个时候还想依赖于line-height来实现垂直居中，显然就不行了。对于这种情况，有多种解决方案：
1: table-cell ＋vertical-align
HTML code:

<div id='child' class='child'>
     <div>Apple</div>
     <div>Orange</div>
 </div>

CSS code:

#child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

呈现的效果：

2: position relative + absolute ＋ margin
HTML code:

<div id='parent' class='parent'>
 <div id='child' class='child'>
     <div>Apple</div>
     <div>Orange</div>
 </div>
</div>

CSS code:

.parent {
    height: 90px;
    width: 90px;
    border: 1px solid black;
}
.child {
    height: 60px;
    width: 60px;
    background-color: #F7F00E;
}
#parent {
    position: relative;
}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;//修正中心点
}

先来看看效果的演进。从第一个图到第二个图是我们添加了＃parend和＃child里面的css的效果，但是这时候不包括＃child里面的最后一句 margin: -30px 0 0 -30px;。因为我们设置了top和left分别相对父元素间隔50%的距离，但是这个位移是以子元素也就是＃child的左上角为原点的，所以如果我们想要达到子元素（＃child）和父元素（＃parent）的中心重合的话，还得再次向左和向上分别移动宽度和高度的一半的距离，也就是＃child里面最后一句代码做的事情。那30px，其实就是＃child一半的宽度和高度。
----> ---->

3: position relative + absolute + margin auto
HTML code:
<div id='parent' class='parent'>

 <div id='child' class='child'>
     <div>Apple</div>
     <div>Orange</div>
 </div>
</div>

CSS code:

.parent {
    height: 90px;
    width: 90px;
    border: 1px solid black;
}
.child {
    height: 60px;
    width: 60px;
    background-color: #F7F00E;
}
#parent {
    position: relative;
   }
#child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

这个实现的技巧在于，我们给目标元素＃child的四个方位都设置了相对父元素为0的距离，但是没有最后一行 margin: auto;就像四个方向都有一个同样大小的力在拉扯着你，这时候产生的效果是呆在原地不动,这时候是左边的效果。但是，当我们添加了最后一行代码：margin: auto;我们的目标元素就会跑到父元素的正中间。margin: 0 auto; 常常被我们用来设置水平位置的居中，所以当我们给它四个方向都设置auto的时候，它就只能在父元素的正中间了。
--->