CSS || 元素垂直居中笔记

CSS种元素垂直居中

根据不同情况，使用的垂直居中方式各异：针对块级元素与行级元素的垂直居中不同。

1 行级元素

1.1 行内包含特殊元素

• 如果行内包含特殊元素：图片、input输入框、inline-block元素或者粗体

• 使用verticle-align: middle;设置对齐方式即可垂直居中。text-bottom/text-top 为下对齐/上对齐

• 兼容性很好：IE4

1.2 设置line-height

• 设置line-height与height值相等，可以实现行级元素或者纯文本的块级元素的垂直居中

• 兼容性好IE4

2 块级元素

2.1 flex和align-items

• 设置容器元素display: flex; align-items: center;即可，其内的子元素在容器中垂直居中

• 缺点： 使用flex布局，并且使用CSS3的align-items属性，兼容性较差：IE11

2.2 flex和align-self

• 设置容器元素display: flex; ，子元素设置align-self: center;

• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

• 同样兼容性较差：IE11

2.3 绝对定位

• 父元素设置相对定位position: relative;

• 子元素设置绝对定位postion: absolute; top: 0; left:0; bottom: 0; right: 0; margin: auto;

• 关键在于设置top: 0; left:0; bottom: 0; right: 0; margin: auto表示水平、垂直4个方向的margin值都通过计算获取

• 兼容性IE7