CSS样式表中,有时候要让某些元素在其父元素内居中,而且这些元素的高度是不确定的。如何实现呢?接下来我们来看看一些方法。.parent{ display:flex; justify-content:c
CSS样式表中,有时候要让某些元素在其父元素内居中,而且这些元素的高度是不确定的。如何实现呢?接下来我们来看看一些方法。
.parent{ display:flex; justify-content:center; align-items:center; }
上面的代码演示了一种使用 Flexbox 实现不确定高度元素垂直居中的方法。我们只需要设置父元素的 display 属性为 flex,然后再使用 justify-content 和 align-items 属性进行水平和垂直居中就可以了。
.parent{ position:relative; } .child{ position:absolute; top:50%; transform:translateY(-50%); }
另外一种常见的方法是使用 position 属性。我们可以设置父元素的 position 为 relative,然后设置子元素的 position 为 absolute。接着使用 top: 50% 和 transform: translateY(-50%) 进行垂直居中。
综上所述,其中这两种方法是比较常见的实现不确定高度元素垂直居中的方法。其它的方法还有使用 table 和 line-height 属性等,根据具体情况选择不同的方法能更好地实现垂直居中效果。
粉丝
0
关注
0
收藏
0