在CSS中,实现全屏居中的效果可以通过对父元素和子元素的属性设置来实现。
/* 父元素 */
.parent {
position: relative; /* 确保子元素以此为基准 */
width: 100%;
height: 100vh; /* 100%视窗高度 */
}
/* 子元素 */
.child {
position: absolute; /* 确保子元素以父元素为基准 */
top: 50%; /* 上下居中 */
left: 50%; /* 左右居中 */
transform: translate(-50%, -50%); /* 平移调整位置 */
}
以上代码通过设置父元素的宽度为100%、高度为视窗高度,并对子元素设置相对于父元素的top和left值来实现垂直和水平居中,最后通过transform属性平移调整子元素位置,实现全屏居中的效果。