align-content:把 flex box 中的所有内容(即 content)作为一个整体,把它上下居中显示在穿过中心的 cross 线上,它只有当这个 flex box 同时设置了 flex-wrap: wrap 才有效。

align-items:把 flex 元素中的每一个一级子元素分别当作一个元素(即 item),把这些元素居中显示在其所在的 cross 线上。

如果一个子元素的 width 大于其父元素的 width,如何把子元素水平居中在父元素中呢?方法是把父元素变成一个 flex container 并使用 justify-content: center,然后在子元素使用 flex-shrink: 0。

在父元素使用 position: relative,然后在子元素使用:

在 transform: translate() 中使用的百分比是相对元素自身 width、height 的百分比,而 top、left 都是相对父元素 width、height 的百分比,这几个百分比结合起来的意思是:

子元素顶部放在父元素中间的位置;

子元素最左边放在父元素中间的位置;

这个 css 属性用在需要居中显示的那个元素中,而不是其父元素,但要注意父元素的 line-height,默认情况下 line-height 的值是 normal,vertical-align 的作用是在父元素的 line-height 中上下居中,如果 line-height 等于需要居中的元素的高度,会看不到效果。

normal 的意思是: