1. 大前提

我们有一个两个block containers, 父子元素的关系,然后我想让子block container的位置垂直居中。可以有的思路是:inline-block || table cell 和 vertical-align 连用, flex, abosulte布局.

2. 借助vertical-align: middle 这一点来实现

2.1vertical-align的属性介绍

Vertical-align属性是用来控制inline-level elements、table cell在line box里头的垂直布局情况。

2.2 借助table cell + vertical-align来实现

通过设置.parent的display为table-cell(所以才能用上vertical-align这个属性),
然后设置.parent的vertical-align 为 middle。【不清楚table-cell 和 inline-level element设置vertical-align:middle的效果有没有不同,因为小火柴的代码里头table-cell的部分是没有设置font-size为0,确实是不用的,两者的实现是不一样的,table-cell的vertical-align是直接使用到自己身上的,这个可能就是个原因。】
这样就已经实现.parent里头子元素的垂直居中,但是会因为 .parent 的高度默认由内容撑起来,所以,看不出垂直居中的效果。
可以再通过设置一个具体的height值来看出 .child 垂直居中的效果。

2.2.1 注意

设置为table-cell的div不能不能不能使用浮动/绝对定位。
小火柴点解释是:‘因为浮动或绝对定位会使元素具有块级元素特性,从而丧失了table-cell元素具有的垂直对齐的功能。若需要浮动或绝对定位处理,则需要外面再套一层div。’
确实,从自己关于 display, position, float属性关系的笔记中,也可以得出这一点。
如果元素被设置成float/绝对定位,那么,它们的display值最终的computed value是根据下面的表来得出的

2.3 借助 inline-block+ vertical-align来实现

因为vertical-align是适用于inline-level element和table-cell的,用来控制inline-level element在line box中的垂直位置[table-cell 的我不清楚]。
所以,我们可以通过吧 .parent 调整成一个line-height较大的只有一行的line box[其实只要在 .parent里头放一个inline-block就可以实现这一点],然后让 inline-block 在.parent 里头的line box中vertical-align: middle就好了。

2.3.1 ps

-0- 如果要兼容IE7-的话, IE版的inline-block.
-1- 因为vertical-align: middle,这个middle的定位,是会加上父元素的半个X的高度,所以,为了实现理想的垂直居中,需要吧父元素的font-size设置成0.
-2- 这个方法也可以用来实现图片在block container中的垂直居中,做法更加简单,不需要设置img的display值,也不需要设置img的line-height.

3.借助绝对定位来实现

3.1 熟悉绝对定位下 height 和 margin 的计算方法[non-replaced element下]。

和normal flow的height计算方法非常不一样的,绝对定位的height是和它的width一样,都是有各自的一条公式可以计算的。
公式如下:
‘Top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + height + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’+ ‘bottom’ = height of containing block

具体的计算方法:
1) 如果 ‘top’ ‘height’ ‘bottom’ 都是auto:
⁃ 【注意:top 和 height 和 bottom的initial value都是auto】
⁃ 无论margin是什么值,都吧 ‘top’ 设置成其在static position的值,然后继续执行rule3

webDev / CSS
the second postHello World