在进行网页布局时,经常会遇到元素不定宽高需要垂直居中的情况,下面介绍几种实现方法。方法一:绝对定位+负margin.parent { position: relative; } .child { po
在进行网页布局时,经常会遇到元素不定宽高需要垂直居中的情况,下面介绍几种实现方法。
方法一:绝对定位+负margin
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
这种方法需要父元素设置为position: relative,子元素设置为position: absolute,并且通过top、left属性将元素移动到父元素的中心,再用transform属性将元素向左上移动其自身宽度和高度的一半,从而实现垂直居中。
方法二:flex布局
.parent { display: flex; align-items: center; justify-content: center; }
使用flex布局可以轻松实现水平和垂直居中。首先将父元素设置为display: flex,再通过align-items和 justify-content属性分别将元素在垂直和水平方向上居中。
方法三:table布局
.parent { display: table; height: 100%; width: 100%; text-align: center; } .child { display: table-cell; vertical-align: middle; }
使用table布局也可以实现垂直居中。首先将父元素设置为display: table,再将高度和宽度设置为100%,使其占据整个屏幕,最后通过text-align属性将元素水平居中,而子元素通过display: table-cell和vertical-align属性实现垂直居中。
以上三种方法都可以实现css不定宽高垂直居中,具体选择哪种方法可以根据具体情况进行选择。
粉丝
0
关注
0
收藏
0