10 透明度和垂直对齐

一、transparent 透明色

opacity:设置元素的透明度，可以使整个元素透明，包含元素里面所有的内容

取值范围 0-1， 0完全透明 1完全不透明

二、行元素在垂直方向的对齐方式

vertical-align

值：

1. top：顶部对齐

2. middle：中间对齐

3. baseline：基线对齐

   基线就是四行三格的第三行

4. bottom：底部对齐

vertical-aligin 只能使用在行元素或者内联元素（inline-block）上，不能使用在块元素上

使用方式：

1. 如果父元素的高度不固定，由其中的一个子元素的高度撑开，那么，给其他子元素设置vertical-align：middle； 就可以实现居中效果
2. 如果父元素的高度固定，不是用子元素撑开高度，可以通过添加一个自定义标签，该标签的高度为父元素的高度，然后设置vertical-align: middle;和display: inline-block; 就可以使父元素的内容居中

vertical-align 也可以解决img标签的缝隙

三、居中专题

1. 块元素水平居中，设置 margin:0auto;
2. 行元素,内联元素的水平居中，在父级设置 text-align:center;
3. 使用 vertical-align 设置行元素和内联元素的垂直居中
4. 使用定位和margin 结合，设置元素居中
   • 给需要居中的元素设置 margin-top 和 margin-left 为自身的一半
   • 给需要居中的元素设置定位距离为 left：50%；top：50%；
5. 父元素宽高固定，子元素绝对定位，可以实现水平绝对居中
   • 父元素宽高固定
   • 子元素绝对定位
   • 给子元素设置 left: 0; right: 0; top: 0; bottom: 0;
   • 给子元素设置 margin:auto;