前端垂直居中方法(其中四种)

2018-08-25  本文已影响0人  余生有期渐相依

垂直居中方法:

(1)定位法:

a、子绝父相原则,父元素给position:relative;子元素给position:absolute;

然后给子元素top:0;left:0;right:0;bottom:0;margin:auto;

b、子绝父相原则(子元素与父元素必须为整数),父元素给position:relative;子元素给position:absolute;      然后left:(宽的50%);top(高的50%);margin-top/left/:他们的一半;

(2)displa居中法:

子元素给了高宽的情况下,给父元素 display:flex; justify-content:center; align-items:center;

(4)vartical-align:middle法:

    给父元素加:text-align:center; 给当前元素加:display:inline-block;cartical-align:middle;

上一篇下一篇

猜你喜欢

热点阅读