CSS中实现宽高不定元素的水平垂直居中是很常见的需求。下面是几种实现方式:/* 第一种方式 */ .parent { position: relative; } .child { position:
CSS中实现宽高不定元素的水平垂直居中是很常见的需求。下面是几种实现方式:
/* 第一种方式 */ .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 第二种方式 */ .parent { display: flex; justify-content: center; align-items: center; } /* 第三种方式 */ .parent { display: grid; } .child { justify-self: center; align-self: center; }
第一种方式使用了绝对定位和transform属性,首先将父元素设置为相对定位,然后对于子元素设置绝对定位,并通过top和left属性将子元素放置在父元素的中心位置。接着使用transform属性平移子元素到其本身宽高的一半,从而实现水平垂直居中。
第二种方式使用flex布局,通过父元素设置display: flex,并设置justify-content和align-items属性为center将子元素水平垂直居中。这种方式不需要子元素设置任何属性。
第三种方式使用grid布局,通过父元素设置display: grid,然后对于子元素分别设置justify-self和align-self属性为center,从而实现水平垂直居中。这种方式也不需要子元素设置任何属性。
粉丝
0
关注
0
收藏
0