Michael Roach

0

html

css

flexbox

鉴于以下设计元素,我试图在html中包含图像,以便可以使用css过渡(悬停效果)操纵不透明度.

这里的主要缺点是我使用手动垂直居中(绝对/顶部:4​​0%),这在缩小浏览器时变得明显.

在使用绝对定位时,是否可以使用flexbox或table进行垂直居中？

HTML

SCSS

.badge-container {display:flex; flex-direction:row;

.badge {position:relative;}

h2 {position:absolute;

top:36%;

left:0;

right:0;

text-align:center;

strong {display:block;}

}

}

img {max-width:100%;}