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