写在前面的话：
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的时刻，它就只能在父元素的正中间了。
—>