在CSS中,要让图片垂直居中需要一些技巧。下面将介绍几种常用的方法: .parent { display: flex; align-items: center; } .child { margin:
在CSS中,要让图片垂直居中需要一些技巧。下面将介绍几种常用的方法:
.parent { display: flex; align-items: center; } .child { margin: 0 auto; }
以上是使用Flexbox的方法。设置parent元素的display属性为flex,然后使用align-items属性将其子元素在垂直方向上居中。其中如果子元素是一个img标签,可以使用margin:0 auto;让其在水平方向上居中。
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
这是另一种方法,使用绝对定位和transform。首先设置parent元素的position属性为relative,然后将child元素设置为position: absolute,并使用top:50%将其向下移动到父元素的中央位置。接下来使用transform:translateY(-50%)把它再向上移动50%的距离,即可让其在垂直方向上居中。
.parent { display: table; height: 100%; width: 100%; text-align: center; } .child { display: table-cell; vertical-align: middle; }
以上是使用display:table的方法。设置parent元素的display属性为table,然后用height和width将其设置为和父元素一样大小。使用text-align: center让其内部元素在水平方向上居中。最后设置child元素的display属性为table-cell,使用vertical-align: middle将其在垂直方向上居中。
粉丝
0
关注
0
收藏
0