写在前面的话:
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的时候,它就只能在父元素的正中间了。
图片描述 ---> 图片描述


nanaistaken
586 声望43 粉丝