css3面试垂直居中 |css 图片拉伸铺满

/*父元素为定高定宽，子元素为定高定宽*/
.parent{
width: 500px;
height: 500px;
position: relative;
}
.child{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

以上代码方法可以将子元素居中对齐。其中position: relative属性是将父元素设置为相对定位，为之后的子元素设置绝对定位做准备。top: 50% 和 left: 50% 将子元素相对于父元素的左上角移动了50%的距离。而transform: translate(-50%,-50%) 则是将子元素相对于自身的中心点上下左右移动了50%的距离，从而实现垂直居中。

/*父元素为定高不定宽，子元素为定高定宽*/
.parent{
display: table-cell;
vertical-align: middle;
height: 500px;
}
.child{
width: 100px;
height: 100px;
margin: 0 auto;
}

以上代码将父元素的display属性设置为table-cell，这样就可以使用vertical-align属性将子元素居中对齐。这里需要注意的是，设置table-cell属性后，父元素的宽度会自动占满整个屏幕。如果需要父元素不占满整个屏幕，则可以添加一个包含父元素的div，并将其宽度设置为所需值。

以上为两种常见的垂直居中方法，在面试中需要了解并熟练掌握。当然，还有其他方法，如使用flexbox等。但也要注意，由于不同的浏览器兼容性存在差异，需要进行适当的兼容处理。