写在前面的话:
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的时候,它就只能在父元素的正中间了。
--->
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。